Bootstrap table 固定 headers - Angular 5
Bootstrap table with fixed headers - Angular 5
我用 HTML 创建了一个 table,我想显示它的 header 是固定的(滚动只会影响到 body)。
我找到了一个解决方案,它几乎可以正常工作。
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
的四个可能值
使用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>
我用 HTML 创建了一个 table,我想显示它的 header 是固定的(滚动只会影响到 body)。
我找到了一个解决方案,它几乎可以正常工作。
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
的四个可能值使用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>