I change the width in div.example . At the same time, I would like the width of the first 3 columns to remain the same, but only the 4th (made specifically for this) would expand:

 <table border="1" style="empty-cells: show;"> <tr> <td>ячейка-1</td> <td>cell-1</td> <td>data-1-2-3</td> <td></td> </tr> <tr> <td colspan="4"> <div class="example" style="width: 300px;"> div.example </div> </td> </tr> </table>

I would like to get this:

enter image description here

Border I added for clarity, they are not needed.

You can set the last cell width: 99% , but then the whole table expands. The merged cell can be set to overflow-x: visible (and remove the fourth cell), but this will not work if the width is not fixed.

In the end, these rows will be repeated, and it is necessary that the columns have the same width (therefore I cannot make the table separately):

 <table border="1" style="empty-cells: show;"> <tr> <td>ячейка-1</td> <td>cell-1</td> <td>data-1-2-3</td> <td></td> </tr> <tr> <td colspan="4"> <div class="example" style="width: 300px;"> div.example </div> </td> </tr> <tr> <td>text</td> <td>long-long-text</td> <td>1</td> <td></td> </tr> <tr> <td colspan="4"> <div class="example" style="width: 300px;"> div.example </div> </td> </tr> </table>

  • Directly specifying <td width="75"> (width in pixels) does not help? - Enikeyschik

3 answers 3

You can try to do this:

 .holder { width: 10px; white-space: nowrap; } 
 <table border="1" style="empty-cells: show;"> <tr> <td class="holder">ячейка-1</td> <td class="holder">cell-1</td> <td class="holder">data-1-2-3</td> <td></td> </tr> <tr> <td colspan="4"> <div class="example" style="width: 300px;"> div.example </div> </td> </tr> </table>

    Do not listen to anyone who says that you can not impose tables, if the situation and the soul require tables.

    And to fix the width of the columns is simple: the first three columns need to be stamped with a fixed width , and the table has a floating, say, width:100% . Everything, at change of width of the table width of the last column will float. If anything, it works since the last century, it is one of the main pillars of the tables.

    Of course, it is necessary to take measures so that the first three columns do not burst with content, but this is the tenth thing.

      This code, according to validation, is not correct. So you can not do! It is better to make the same thing, but in block layout through flexbox. Put a fixed width of the first three columns, and the fourth will move independently (based on the content)

      • one
        The validator swears only on the border, the code is correct in everything else, and the border does not concern the essence of the issue - andreymal
      • This code is valid - dmitryshishkin
      • Border added for clarity, and that would not complicate the example. - Zergatul