我在居中的 div 的两侧各有两个表格。我希望左侧表格中的内容在右侧对齐,右侧表格中的内容在左侧对齐。我设法通过在左侧表格中创建一个额外的列并在第一个单元格上设置 width: 100%
并在第二个单元格上设置 white-space: nowrap
来做到这一点.
问题是,由于 nowrap
属性,当表格太小时内容会溢出。我尝试设置 word-wrap: break-word
是徒劳的。如何强制内容适合表格宽度?
到目前为止,这是我的代码:JSFIDDLE
#container {
height: 180px;
display: flex;
flex-flow: row;
align-items: stretch;
border: 1px dotted gray;
}
table {
flex: 1;
display: flex;
margin: 10px;
overflow-y: scroll;
overflow-x: hidden;
border: 1px dashed blue;
}
tbody {
display: block;
margin: auto 0;
}
td {
padding: 5px;
border: 1px solid red;
}
#left td:nth-child(1){
width: 100%;
}
#left td:nth-child(2) {
white-space: nowrap;
}
#list, #center {
width: 100px;
margin: 10px;
border: 1px dotted gray;
}
<div id="container">
<div id="list"></div>
<table id="left">
<tbody>
<tr>
<td></td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td></td>
<td>Valar morghulis</td>
</tr>
<tr>
<td></td>
<td>One fish, two fish, red fish, blue fish</td>
</tr>
</tbody>
</table>
<div id="center"></div>
<table id="right">
<tbody>
<tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
<tr><td>The quick brown fox jumps over the lazy dog</td></tr>
<tr><td>Would you kindly help me out</td></tr>
<tr><td>Supercalifragilisticexpialidocious</td></tr>
<tr><td>Alpha</td></tr>
<tr><td>Bravo</td></tr>
<tr><td>Charlie</td></tr>
<tr><td>Delta</td></tr>
<tr><td>Echo</td></tr>
<tr><td>Foxtrot</td></tr>
<tr><td>Golf</td></tr>
</tbody>
</table>
</div>
最佳答案
关于html - 在可伸缩表格中包装文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30967113/