演示:http: //jsfiddle.net/zvmcyp4w/
.wide {
width: 400px;
background: lightblue;
}
.narrow {
width: 200px;
background: lightpink;
}
.table-responsive {
max-width: 100%;
overflow-x: auto;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
<div class="wide">
<div class="table-responsive">
<table>
<tr>
<td>Many words</>
<td>word</td>
<td>oneword</td>
<td>onemoreword</td>
</tr>
</table>
</div>
</div>
<div class="narrow">
<div class="table-responsive">
<table>
<tr>
<td>Many words</>
<td>word</td>
<td>oneword</td>
<td>onemoreword</td>
</tr>
</table>
</div>
</div>
我正在模拟包含同一个表格的“宽”和“窄”的响应式布局。
在“窄”中,您可以左右滚动。
如果一个单元格的内容是由多个单词组成的,比如第一个单元格,它会自动分成几行。
我正在寻找的是避免断线并让单元格水平扩展以适应其内容,因为内容是动态的,因此不允许使用固定宽度或最小宽度。
理想情况下,一个干净的纯 CSS 解决方案会很棒,我已经知道如何用 JavaScript 解决它。