我有一个包含很多行(1000+)的表。结构非常简单,这是一个只有一行的简化示例。
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>
我需要修复列名,所以我使tbody可滚动。我添加了这些CSS规则
tbody {
display: block;
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
}
这是一个完整的JSfiddle example
有两个问题。
<tbody>
没有占据所有的宽度。我尝试使用width: 100%;
,但它不起作用。 display: block;
似乎阻止了正常的宽度行为,但我需要它用于滚动。我怎么能占用所有可用空间?即使只有一列获得所有剩余空间也没关系<thead>
和<tbody>
列宽不同。目前我使用jQuery代码片段像其他行一样设置标题宽度,这很好,但我想知道是否有更好的解决方案。这个answer可以提供帮助:它提供了所有可能的解决方案,包括纯css和jquery。
这是纯css的工作解决方案,其中<tbody>
和<thead>
具有相同的宽度:
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
thead {
border: 1px solid grey;
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: 100%;
}
tbody {
max-height: 150px;
width: 100%;
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead,
table tbody tr {
display: table;
table-layout: fixed;
}
/* decorations */
.table-container {
border: 1px solid black;
padding: 0.3em;
}
table {
border: 1px solid lightgrey;
}
table td, table th {
padding: 0.3em;
border: 1px solid lightgrey;
}
table th {
border: 1px solid grey;
}
td{
word-wrap:break-word
}
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1akeuntveiuyrtiueyctiuyetiuyenaiuc</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value sifcaiuerycnpiuaerypintcer2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>
编辑 - 替代解决方案:如果您从display:block;
中删除<tbody>
,您的代码将起作用。
tbody {
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
border: 1px solid grey;
width: 100%
}
将此添加到css
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed; /* even columns width , fix width of table too*/
}
定义到这个CSS
tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid grey;
width: 100%;
text-align: left;
}
thead {
border: 1px solid grey;
}
tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}
tbody {
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
border: 1px solid grey;
width: 100%
}
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>