带有标题和Y滚动的Reposonsive表

时间：2017-11-09 23:14:36

标签： css patternfly

我被困在桌子上 我的标题没有与我的身体tds排成一行，我的卷轴正在摆脱对齐。

我想我可以使用

table-header-group

但是，这会丢失我的卷轴。

如果我把它作为一个div，那么我的标题丢失了。

附件是观看的小提琴 无论如何，我怎么能： 1.将头部与身体对齐 2.在Y中使用滚动 3.使用响应表格来拟合数据

首先，摆弄奇怪的CSS“显示：”用法

Fiddle

更新了80px覆盖的小提琴高度：

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

2 个答案:

答案 0 :(得分：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;
}

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

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

相关问题
最新问题