具有固定标头的引导数据库表-角度5
具有固定标头的引导数据库表-角度5
提问于 2018-05-28 18:06:24
我已经用HTML创建了一个表格，我想要显示它的标题是固定的(滚动只会影响到正文)。
我已经找到了一个解决方案，它几乎如我所愿地工作。
tbody {
display:block;
height:500px;
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 */
}
table {
width:400px;
}问题是，使用属性table-layout: fixed，它修复了列的宽度，因此我的列不能正确显示(它们重叠)：
我怎么才能修复它呢？我已经尝试了table-layout的四个可能值
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-28 18:24:14
使用td {word-wrap: break-word;}
tbody {
display:block;
height:500px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
td{
word-wrap: break-word;
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
width:400px;
}<table class="a">
<thead>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</thead>
<tbody>
<tr>
<td>AlfredsFutterkisteghrtrh</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50563882
复制相关文章
相似问题