有可能吗？
我有一个填满容器的表格。 (宽度 100%) 它的两列(第一列和第三列)有最小宽度，但中间一列没有。
当我缩小窗口时，我希望第 1 和第 3 列保持最小宽度，而中间列必须完全折叠(当窗口太窄时，只能显示第 1 和第 3 列)。
谢谢。
有我所拥有的简化代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
.overflow{
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
.table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.first{
min-width: 20px;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="first"><div class="overflow">oneoneoneone</div></td>
<td class="second"><div class="overflow">twotwotwotwo</div></td>
<td class="first"><div class="overflow">threethreethree</div></td>
</tr>
</table>
</body>
</html>
最佳答案
您可以使用一些基本的 CSS 样式和媒体查询来完成此操作，这是一个示例
<table border=1>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
</tr>
</tbody>
<style>
@media only screen and (max-width:500px){
table td:nth-child(2), table th:nth-child(2) {
display:none;
}
}
</style>
所以当屏幕小于 500px 时，第 2 列将隐藏。
Fiddle 正在展示它:http://jsfiddle.net/9rEgQ/2/
关于html - 宽度为零的表格列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20097840/