I have a dynamic table, with one field. When you click "add" is added another <tr> and so on. on the first <tr> I don’t have a "delete" button, but when I add more, this button appears. For a table I use table-layout because inside there can be select which can be long and spoil the whole table and table-layout suits me perfectly, but when I add the next field and the small "delete" button appears, it also goes like a cell ( ) and, accordingly, its size becomes the same as the size of other cells. I tried to do on the table table-layout:fixed; width:100% table table-layout:fixed; width:100% , and per cell width:5% , but this did not help, as well as just setting the width. Tell me how to make it smaller? Sample Plcr

    2 answers 2

    As an option, a couple of options came out to resolve the issue:

    1. add styles to css:

      table, tr, td:nth-child(-1) { width: auto; border:none; margin: 1px; }

      1. add one additional column to <th> , which can be hidden by adding the border-color:transparent style and adding the width, for example width:30px and then all the cells will be the same size except for the last one. Plus, regardless of the number of dynamically added columns, the latter will be allocated to the required width. It works too, but it’s not so beautiful :)

      After the <table> tag, add a description of the columns. For each column, you can specify its width.

       <table> <col> <col> <col> <col> <col width="30"> </table>
      • columns also dynamically load and guess how many of them will be impossible ( - YoroDiallo
      • you use an angular! these elements can also be dynamically created - Alexey Prokopenko