我被困在桌子设计上。
我的标题没有与我的 body tds 对齐，并且我的滚动条偏离了对齐方式。
我想我可以只使用一个
table-header-group
但是，这失去了我的卷轴。
如果我把它放在一个 div 中，那么我的标题就会丢失到滚动条上。
附上一个小提琴供查看。
无论如何，我怎么能： 1. 将我的头与身体对齐 2. 在 Y 中使用滚动 3. 使用作为响应表来拟合数据
首先，摆弄奇怪的 CSS "display:" 用法
更新了 80px 的小提琴高度被覆盖：
问问题
108 次
2 回答
2
您的显示重置可以在 every 上，然后添加一个与滚动条的平均宽度相等tr的填充。https://jsfiddle.net/t1zss67n/5/thead
实际上非常类似于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>于 2017-11-09T23:47:33.803 回答
0
回答：向下滚动html表格时不要滚动表格标题 具体参见： http ://www.imaputz.com/cssStuff/bigFourVersion.html
尽管 jsfiddle.net/deborah/Msvvr/ 这个小提琴可能提供最好的解决方案
于 2017-11-09T23:43:30.603 回答