Repossonive table with headers and Y scroll

Question

我卡在 table 设计上。
我的 header 没有与我的 body tds 对齐，而且我的卷轴没有对齐。

我想我可以使用

table-header-group

但是，我的卷轴丢失了。

如果我把它放在 div 上，那么我的 header 就会丢给卷轴了。

附上一张fiddle供查看。
无论如何，我怎么能： 1. 将我的头对准 body 2.在Y中使用滚动 3.使用响应table

拟合数据

首先，Fiddle 有奇怪的 CSS "display:" 用法

Fiddle

已更新 Fiddle 80 像素的高度被覆盖：

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

Answer 1

已回答：Do not scroll table headings when scrolling down a html table 具体见： http://www.imaputz.com/cssStuff/bigFourVersion.html

这个 fiddle 可能会提供最好的解决方案 jsfiddle.net/deborah/Msvvr/

Answer 2

您的显示重置可以在每个 tr 上进行，然后向 thead 添加滚动条平均宽度相等的填充应该就可以了。 https://jsfiddle.net/t1zss67n/5/

实际上非常类似于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>

Repossonive table with headers and Y scroll

Reposonsive table with headers and Y scroll

css

patternfly