tr tbody滚动100%宽度

Question

我找了另一个问题，但找不到

https://jsfiddle.net/0u15em89/

table>tbody {
display: block;
max-height: 50px;
overflow: auto;
}
table {
width: 100%;
}

<table>
<tbody>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
</tbody>
</table>

添加滚动到正文，

我想通过删除td和滚动之间的空格来使宽度达到100%。

是否可以不固定td的宽度？

Answer 1

如果我答对了你的问题，你可以通过下面的样式获得完整的宽度：

table { 
width: 100%; 
border-spacing: 0; 
}
table tbody, table thead { 
display: block; 
}  
thead tr th { 
height: 40px;  
line-height: 40px; 
} 
table tbody { 
height: 50px;  
overflow-y: auto; 
overflow-x: hidden;  
} 
tbody td, thead th { 
width : 200px; 
} 
td { 
text-align:center; 
} 

Answer 2

试试这个，首先，删除整个部分

table>tbody {
display: block;
max-height: 50px;
overflow: auto;
}

第二，用div标签包围表格标签示例：<div><table>......</table></div>。让div标签像这样滚动，

div {
max-height: 50px;
overflow: auto;
}

Answer 3

将以下css应用到tr将帮助您解决width问题，而无需为td提供特定宽度。

table>tbody {
display: block;
max-height: 50px;
overflow: auto;
}
table {
width: auto;
display: inherit;
}
tr {
display: inline-table;
width: 100%;
}

<table>
<tbody>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
</tbody>
</table>