我希望这相当简单。
我想为表格保留 table-layout:auto，因为这允许“name”列适当调整大小，而 url 列用完剩余空间。
问题是当 url 列变大时，表格的大小会自动超出宽度。
理想情况下，一旦溢出超出包含的 div 的大小，我想隐藏“url”列上的溢出。
在 Jsfiddle 示例中，您可以看到第一个表的大小调整得很好，“名称”列占用了可用空间。
在第二个表中，由于“url”列中的文本，它超出了包含它的 div。我不知道如何隐藏这个溢出。
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style>
table {
table-layout:auto;
}
table, th, td
{
text-align:left;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
</head>
<div style="width:400px; border: 1px solid red; background-color:lightgrey;">
<table>
<thead>
<tr><th>Status</th><th style="width:100%">Name</th><th style="width:100%">Url</th></tr>
</thead>
<tbody>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred long long long name</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com/xxxxxx </td></tr>
</tbody>
</table>
</div>
</div>
<p/>
<div style="width:400px; border: 1px solid red; background-color:lightgrey;">
<table>
<thead>
<tr><th>Status</th><th style="width:100%">Name</th><th style="width:100%">Url</th></tr>
</thead>
<tbody>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred long long long name</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
<tr><td>On</td><td>Fred</td><td>http://www.google.com/xxxxxxxxxxxxxxxxxxxxxxx</td></tr>
</tbody>
</table>
</div>
</body>
</html>
最佳答案
我用过，It's only work set table-layout: fixed 是让它工作的关键。
word-wrap: break-word;
word-break: break-all;
table-layout: fixed;
检查这个jsFiddle对你有帮助
编辑更新
检查这个JsFiddle
删除你的内联样式，现在你的 css 是
table {
table-layout:auto;
}
table, th, td
{
text-align:left;
word-break:break-all;
}
关于html - 如何在表格 th 或 td 中设置分词符，当列和表格布局自动使用 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22342068/