我<tbody>
垂直滚动,<thead>
保持不变。现在我想让整个表格水平滚动。问题是,一旦我在包含<div>
上设置宽度,它就会中断,可能是因为<td>
是display: inline-block
。有什么建议吗?
这里工作正常,没有表格的设定宽度:
html,
body {
margin: 0;
}
div {
/* width: 500px; */
}
table {
height: 300px;
display: block;
border-collapse: collapse;
overflow: hidden;
}
thead,
tbody {
display: table;
table-layout: fixed;
}
tbody {
height: 100%;
overflow: auto;
display: block;
}
th,
td {
width: 150px;
overflow-x: hidden;
display: inline-block;
}
&#13;
<div>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>first_name</th>
<th>last_name</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
</tbody>
</table>
</div>
&#13;
这就是我在包含<div>
:
html,
body {
margin: 0;
}
div {
width: 500px;
}
table {
height: 300px;
display: block;
border-collapse: collapse;
overflow: hidden;
}
thead,
tbody {
display: table;
table-layout: fixed;
}
tbody {
height: 100%;
overflow: auto;
display: block;
}
th,
td {
width: 150px;
overflow-x: hidden;
display: inline-block;
}
&#13;
<div>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>first_name</th>
<th>last_name</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
<tr>
<td>1</td>
<td>Ralph</td>
<td>Wright</td>
<td>rwright0@indiatimes.com</td>
</tr>
<tr>
<td>2</td>
<td>Walter</td>
<td>Sullivan</td>
<td>wsullivan1@photobucket.com</td>
</tr>
</tbody>
</table>
</div>
&#13;
提前感谢您的帮助!
答案 0 :(得分:1)
对于表格,请保持显示:阻止和编辑溢出,如下所示:
table {
display: block;
overflow-x: auto;
}
到你的桌子。