我的代码类似于这种情况:
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
<div>
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
我有一个table-layot: auto
样式的表,这些单元格显示非常大的文本。上表是显示的选项卡。水平滚动tabs div
被切断后。
是否有可能延长tabs
div,具体取决于表格的宽度?
相关图片:
答案 0 :(得分:5)
div(或具有display:block
的任何元素)仅与其容器一样宽
因此,一种解决方案是将其放在与表一样宽的容器中。例如,桌子周围有一个inline-block
,它会将自己伸展到正确的宽度。
.div-and-table-wrapper {
display:inline-block;
min-width:100%;
}
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
<div class="div-and-table-wrapper">
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
(注意:min-width
用于确保标签div至少与窗口一样宽,以防表格更窄。
如果您不希望这样,即如果您希望标签div始终与表格的宽度相同,那么最好将它变成caption
。)
答案 1 :(得分:1)
您需要将父div
的宽度设置为fit-content
:
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
.tabs-wrapper {
width: fit-content;
}
&#13;
<div class="tabs-wrapper">
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
&#13;
正如李斯特先生所建议的那样,另一种方法是使用inline-block
代替fit-content
。