How to fix html table col width after hiding other cols?

Question

I have a html table having 5 columns. In the design time, I use to specify each column's width with relative width %. In the runtime, the javascript codes hide three columns, the other two columns become very wide. How can I let the remaining two columns' width not changed? But I don't want to use the pix to fix the width.

Thank you.

Answer 1

尝试为 css 中的每个 TD 或 TH 提供 20% 的最大宽度。

Answer 2

You could try changing the way those columns are hidden: If they are being set to display:none; (either with an inline style set by js, or by adding/removing a class) then you can change that to visibility:hidden; - this way they will still take up space, but will not be shown.

Answer 3

If you use viewport width vw instead of percent % it will work.

 table { border-collapse: collapse; } td { border: 1px solid; width: 20vw; } td:nth-child(1), td:nth-child(2), td:nth-child(4) { display: none; }

 <table> <tr> <td>Some text hidden</td> <td>Some text hidden</td> <td>Some text visibile</td> <td>Some text hidden</td> <td>Some text visibile</td> </tr> </table>

Answer 4

I found the best way is using float : left.

td {
    float:left;
}

<table>
  <tr>
    <td>Some text hidden</td>
    <td>Some text hidden</td>
    <td>Some text visibile</td>
    <td>Some text hidden</td>
    <td>Some text visibile</td>
  </tr>
</table>