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
Updated Fiddle height of 80px overridden:
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>