Question

我正在尝试使用<col>和visibility:collapse隐藏表格中的列，如下所述： Is it possible to hide / show table columns by changing the CSS class on the col element only?

现在我发现这个解决方案似乎只适用于“普通”表，但不适用于border-collapse:collapse。在这种情况下，只隐藏列的内容，后续列的内容向左移动。

见这里： http://jsfiddle.net/seeLcc2p/3/

body {
  padding: 5px;
}

table {
  border: 1px solid black;
  border-collapse: collapse;
  /*   border-collapse:separate; */
}

.hide {
  visibility: collapse;
}

<head>
  <style>
      /* css code */
  </style>
</head>

<body>
  <table border="1">
    <col width="100" />
    <col width="50" class="hide" />
    <col width="100" />
    <col width="100" />
    <tr>
      <td>Row 1 Col 1</td>
      <td>Row 1 Col 2</td>
      <td>Row 1 Col 3</td>
      <td>Row 1 Col 4</td>
    </tr>
    <tr>
      <td>Row 2 Col 1</td>
      <td>Row 2 Col 2</td>
      <td>Row 2 Col 3</td>
      <td>Row 2 Col 4</td>
    </tr>
    <tr>
      <td>Row 3 Col 1</td>
      <td>Row 3 Col 2</td>
      <td>Row 3 Col 3</td>
      <td>Row 3 Col 4</td>
    </tr>
  </table>
</body>

当border-collapse:separate;所有内容都被排除在外时，border-collapse:collapse;布局会被破坏......

任何想法如何解决这个或我做错了什么？在Firefox 57.0.4中尝试。

Answer 1

而不是使用可见性：崩溃，尝试可见性：隐藏它应该做的技巧

表：“可见性：崩溃”不适用于“边界崩溃”

1 个答案: