0

I am trying to hide columns in a table using <col> and visibility:collapse as described here: Is it possible to hide / show table columns by changing the CSS class on the col element only?

Now I found out that this solution seems to work only with "normal" tables but not when having border-collapse:collapse. In that case, only the content of the column is hidden and the content of the subsequent columns is shifted to the left.

See here: 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>

When having border-collapse:separate; everything is as excepted, with border-collapse:collapse; the layout is broken…

Any ideas how to fix this or what I'm doing wrong?
Tried in Firefox 57.0.4.

Johannes
  • 64,305
  • 18
  • 73
  • 130
SanSibar
  • 1
  • Looks like a Firefox bug. Note that Chrome doesn't support visibility:collapse on columns at all. I suggest you check Edge and if it looks as you expect then file a bug against Firefox. – dgrogan Jan 31 '18 at 02:27

1 Answers1

0

Instead of using visibility:collapse, try visibility:hidden it should do the trick

deepak thomas
  • 1,118
  • 9
  • 23
  • These are different. visibility:hidden will leave a blank space where the column used to be, while visibility:collapse will not. – dgrogan Jan 31 '18 at 02:16