0

I'm stuck on a table design.
My headers aren't lining up with my body tds, and my scroll is throwing off alignment.

I imagine I could just use a 

table-header-group

However, that loses my scroll.

If I put it an a div, then I lose my header to the scroll.

Attached is a fiddle for viewing.
Anyways, How can I: 1. Align my head with the body 2. use scroll in the Y 3. Fit the data using as a responsive table

First, Fiddle with weird CSS "display:" usage

Fiddle

Updated Fiddle height of 80px overridden:

https://jsfiddle.net/t1zss67n/4/

user1093111
  • 1,091
  • 5
  • 21
  • 47
  • The head/body misalignment is caused by strange use of `display` rules on `thead`, `tbody`, and `tbody tr` – https://vgy.me/KsmIlm.png. I'm afraid i don't quite understand what do you mean in points 2 and 3… – helb Nov 09 '17 at 23:26
  • Yeah, CSS in not my forte. I just want to scroll the table and limit the height to 800, with table-header-group it removes the Y overflow. – user1093111 Nov 09 '17 at 23:27
  • So, I removed the display: table <- left over from a previous try, but I lost my scroll and the max-height is overridden – user1093111 Nov 09 '17 at 23:31

2 Answers2

2

Your display reset could be on every tr, then adding a padding to thead of equal average width of the scrollbar should do. https://jsfiddle.net/t1zss67n/5/

actually very similar to How to set tbody height with overflow scroll

thead  {
  display:block;
  padding-right:17px ;
}
thead tr, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}


.thead {
  background-clip: padding-box;
  background-color: #f5f5f5;
  background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
  background-repeat: repeat-x;
  font-weight: 700;
  font-size: 12px;
}
table ,tr td{
    border:1px solid red
}
tbody {
  max-height: 800px;
}
tbody {
    display:block;
    overflow-y:scroll;
}

thead  {
  display:block;
  padding-right:17px ;
}
thead tr, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

tr td:first-child {
  width: 60px;

}

.table-hover>tbody>tr:hover> td{
  background-color: #ffa;
  border-bottom-color: #ffa;
}
.table-hover>tbody>tr>td:hover:not(:first-child) {
  background-color: #fff;
  border: 1px solid #aaa;
}

td {
 text-overflow: ellipsis;
 width: 10px;
 white-space: nowrap;
 overflow: hidden;
 padding: 2px;
}
<table class="table table-hover table-responsive">
  <thead>
    <tr class="thead">
      <td>Name</td>
      <td>Nov16</td>
      <td>Dec16</td>
      <td>Jan17</td>
      <td>Feb17</td>
      <td>Mar17</td>
      <td>Apr17</td>
      <td>May17</td>
      <td>Jun17</td>
      <td>Jul17</td>
      <td>Aug17</td>
      <td>Sept17</td>
      <td>Oct17</td>
      <td>RTM</td>
      <td >2012</td>
      <td>2013</td>
      <td>2014</td>
      <td>2015</td>
      <td>2016</td>
      <td>YTD</td>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td class="text-left">Gabe Maloney</td>
      <td class="text-right">253</td>
      <td class="text-right">229</td>
      <td class="text-right">78</td>
      <td class="text-right">36</td>
      <td class="text-right">236</td>
      <td class="text-right">107</td>
      <td class="text-right">106</td>
      <td class="text-right">246</td>
      <td class="text-right">66</td>
      <td class="text-right">71</td>
      <td class="text-right">172</td>
      <td class="text-right">235</td>
      <td class="text-right ttm">1728</td>
      <td class="text-right">1943</td>
      <td class="text-right">1275</td>
      <td class="text-right">1810</td>
      <td class="text-right">225</td>
      <td class="text-right">985</td>
      <td class="text-right ytd">896</td>
    </tr>
    <tr role="row">
      <td class="text-left">Adrien Johnson</td>
      <td class="text-right">274</td>
      <td class="text-right">291</td>
      <td class="text-right">195</td>
      <td class="text-right">133</td>
      <td class="text-right">171</td>
      <td class="text-right">19</td>
      <td class="text-right">79</td>
      <td class="text-right">31</td>
      <td class="text-right">262</td>
      <td class="text-right">208</td>
      <td class="text-right">58</td>
      <td class="text-right">117</td>
      <td class="text-right ttm">1819</td>
      <td class="text-right">1799</td>
      <td class="text-right">1010</td>
      <td class="text-right">336</td>
      <td class="text-right">417</td>
      <td class="text-right">1803</td>
      <td class="text-right ytd">755</td>
    </tr>
    <tr role="row">
      <td class="text-left">Axel Johnson</td>
      <td class="text-right">275</td>
      <td class="text-right">294</td>
      <td class="text-right">232</td>
      <td class="text-right">80</td>
      <td class="text-right">128</td>
      <td class="text-right">143</td>
      <td class="text-right">255</td>
      <td class="text-right">235</td>
      <td class="text-right">186</td>
      <td class="text-right">48</td>
      <td class="text-right">97</td>
      <td class="text-right">199</td>
      <td class="text-right ttm">2029</td>
      <td class="text-right">1031</td>
      <td class="text-right">787</td>
      <td class="text-right">333</td>
      <td class="text-right">1259</td>
      <td class="text-right">1261</td>
      <td class="text-right ytd">1020</td>
    </tr>
    <tr role="row">
      <td class="text-left">George Johnson</td>
      <td class="text-right">39</td>
      <td class="text-right">102</td>
      <td class="text-right">127</td>
      <td class="text-right">171</td>
      <td class="text-right">128</td>
      <td class="text-right">283</td>
      <td class="text-right">201</td>
      <td class="text-right">231</td>
      <td class="text-right">34</td>
      <td class="text-right">150</td>
      <td class="text-right">76</td>
      <td class="text-right">80</td>
      <td class="text-right ttm">1339</td>
      <td class="text-right">907</td>
      <td class="text-right">1221</td>
      <td class="text-right">1876</td>
      <td class="text-right">999</td>
      <td class="text-right">2012</td>
      <td class="text-right ytd">772</td>
    </tr>
    <tr role="row">
      <td class="text-left">Reek Jones</td>
      <td class="text-right">224</td>
      <td class="text-right">109</td>
      <td class="text-right">162</td>
      <td class="text-right">192</td>
      <td class="text-right">226</td>
      <td class="text-right">270</td>
      <td class="text-right">257</td>
      <td class="text-right">65</td>
      <td class="text-right">137</td>
      <td class="text-right">172</td>
      <td class="text-right">168</td>
      <td class="text-right">173</td>
      <td class="text-right ttm">1885</td>
      <td class="text-right">1086</td>
      <td class="text-right">649</td>
      <td class="text-right">447</td>
      <td class="text-right">480</td>
      <td class="text-right">825</td>
      <td class="text-right ytd">972</td>
    </tr>
    <tr role="row">
      <td class="text-left">JP Lefkort</td>
      <td class="text-right">76</td>
      <td class="text-right">82</td>
      <td class="text-right">18</td>
      <td class="text-right">54</td>
      <td class="text-right">27</td>
      <td class="text-right">240</td>
      <td class="text-right">50</td>
      <td class="text-right">248</td>
      <td class="text-right">197</td>
      <td class="text-right">294</td>
      <td class="text-right">20</td>
      <td class="text-right">262</td>
      <td class="text-right ttm">1328</td>
      <td class="text-right">2007</td>
      <td class="text-right">143</td>
      <td class="text-right">1126</td>
      <td class="text-right">803</td>
      <td class="text-right">1771</td>
      <td class="text-right ytd">1071</td>
    </tr>
    <tr role="row">
      <td class="text-left">Susan Segal</td>
      <td class="text-right">101</td>
      <td class="text-right">236</td>
      <td class="text-right">95</td>
      <td class="text-right">204</td>
      <td class="text-right">213</td>
      <td class="text-right">197</td>
      <td class="text-right">292</td>
      <td class="text-right">49</td>
      <td class="text-right">44</td>
      <td class="text-right">75</td>
      <td class="text-right">137</td>
      <td class="text-right">49</td>
      <td class="text-right ttm">1495</td>
      <td class="text-right">1215</td>
      <td class="text-right">1667</td>
      <td class="text-right">546</td>
      <td class="text-right">753</td>
      <td class="text-right">849</td>
      <td class="text-right ytd">646</td>
    </tr>
    <tr role="row">
      <td class="text-left">Antonio Townsend</td>
      <td class="text-right">244</td>
      <td class="text-right">198</td>
      <td class="text-right">98</td>
      <td class="text-right">262</td>
      <td class="text-right">281</td>
      <td class="text-right">141</td>
      <td class="text-right">219</td>
      <td class="text-right">273</td>
      <td class="text-right">123</td>
      <td class="text-right">68</td>
      <td class="text-right">15</td>
      <td class="text-right">114</td>
      <td class="text-right ttm">1895</td>
      <td class="text-right">143</td>
      <td class="text-right">1612</td>
      <td class="text-right">1564</td>
      <td class="text-right">148</td>
      <td class="text-right">1042</td>
      <td class="text-right ytd">812</td>
    </tr>
  </tbody>
</table>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

Answered: Do not scroll table headings when scrolling down a html table See specifically: http://www.imaputz.com/cssStuff/bigFourVersion.html

This fiddle may provide the best solution though jsfiddle.net/deborah/Msvvr/

Berdesdan
  • 359
  • 1
  • 5
  • 12