【发布时间】：2017-02-11 18:08:52
【问题描述】：
我在我的反应应用程序中使用引导表。但该表现在不可滚动。每当内容加载到其中时，它都会增加其高度以容纳内容。我想让 i 可滚动。这是我的表格组件
<div className='flex-vertical'>
<Table className='flags-table' responsive hover>
<thead>
<tr>
<th></th>
<th> Time In</th>
<th> Time Out</th>
<th> Type</th>
<th> Category</th>
</tr>
</thead>
<tbody>
{
that.props.tag_fetch_reducer.tags.map((x, i) => (
<tr key={i} onClick={this.handleRowClick.bind(this, i)}>
<td>
<div className='red-box'></div>
</td>
<td> {this.secondsToHms(x.time)} </td>
<td> {this.secondsToHms(x.stopTime)} </td>
<td> {x.tagname} </td>
<td contentEditable="false"> {x.category}</td>
</tr>
))
}
</tbody>
</Table>
这是这么多代码的手写笔部分
.flex-vertical
display flex
flex-direction column
height 100%
.flags-table
.red-box
width 16px
height 16px
margin 3px 5px
background-color red
从 cmets 实施解决方案后，我得到了这个
我做了这个
.flex-vertical
display flex
flex-direction column
height 100%
Table ,tr td{
}
tbody {
display:block;
height:50px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
【问题讨论】：
-
你能把它变成纯 html 并告诉我们你的列宽度，如果有任何 colspan 或 rowspan ，...如果这些和 col 都没有相同/均匀宽度，那么这可以给你一些提示：stackoverflow.com/questions/23989463/…。 flex 现在也可以用了
-
让我google一下你的stackoverflow.com/a/10420189/1815058
-
@GCyrillus 我实施了您的解决方案。它有点工作我只能看到一个小的高度表，因为高度固定为 50 px。我该怎么做才能覆盖分配的空间
-
你需要设置一个与你想要填充的内容相似的高度，这里你设置了 50px 所以它不会增长超过这个:( （或者我误解了什么？flex会做得很多更容易:)
-
你能用 flex 写一个答案吗？
标签： javascript css reactjs material-ui stylus