表格列宽为零

Question

表格列宽为零

htmlcss

5

这是否有可能呢？

我有一个填充其容器的表格（宽度为100%），其中两列（第一列和第三列）具有最小宽度，但中间一列没有。

当我缩小窗口时，我希望第一列和第三列保持最小宽度，而中间列必须完全折叠（当窗口太窄时，只显示第一列和第三列）。

谢谢。

以下是我拥有的简化代码：

<!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>

- Murval

@Pratik，我弄错了 :) - SaturnsEye

2

你需要使用JavaScript或媒体查询来检测容器的宽度，然后可以像这样使用一些CSS：td:nth-child(2), th:nth-child(2) {display:none;}。 - SubjectCurio

@MLeFevre，就是这个意思，谢谢你提供的语法 :) - Pratik

@Pratik，（MLeFevre）- 使用JavaScript确实应该可以工作（感谢您的建议）。但是是否有办法仅使用CSS来完成此操作（在JS关闭的情况下）？也许有一种方法可以将其隐藏到某种程度，以至于字母无法被看到。 - Murval

@Adsy - 我找不到任何证据。如果你有的话，能否分享一下？ - Murval

显示剩余3条评论

2个回答

0

你可以使用CSS和媒体查询来在屏幕缩小到指定宽度时隐藏中间列。

例如：

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

在这个例子中，当屏幕宽度小于500像素时，第二列将不会显示。

- Ben Broadley

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SubjectCurio · Accepted Answer

您可以使用一些基本的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>

当屏幕小于500像素时，第二列将会隐藏。

演示效果的Fiddle链接: http://jsfiddle.net/9rEgQ/2/