Question

有可能吗？

我有填充容器的表。（宽度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>

Answer 1

你可以用一些基本的CSS样式和＆amp;媒体查询，这是一个例子

<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时，第二列将隐藏。

小提琴展示它的实际效果：http://jsfiddle.net/9rEgQ/2/

Answer 2

当屏幕缩小到指定的宽度时，您可以使用CSS和媒体查询隐藏中间列。

例如：

@media all and (max-width:500px) {
.second {
display: none;
} 
}

在此示例中，当屏幕缩小到小于500px的宽度时，不会显示第二列

表格列宽度为零

2 个答案: