There is a table, the width of the first column is 30px. It is necessary to make the cell 1а 50px wide, while leaving the rest of the structure unchanged. How to do it?

 table { border: solid 1px blue; border-collapse: collapse; width: 500px; height: 100px; } td, th { border: solid 1px blue; padding: 10px; } .w21{ width: 50px; } 
 <table> <caption>Таблица с заданными размерами</caption> <tr> <th style="width:30px">1</th> <th>2</th> </tr> <tr> <th class="special">1a</th> <th>2</th> </tr> <tr> <th>1</th> <th>2</th> </tr> </table>

    1 answer 1

    For a table, it will not be possible to set different widths of cells, so as for example:

     * { box-sizing:border-box; } .caption { padding: 1rem; } .table { border: solid 1px blue; border-collapse: collapse; max-width: 500px; width: 100%; } .tr { display: table; width: 100%; table-layout:fixed; } .td { border: solid 1px blue; border-left: none; padding: 10px; display: table-cell; vertical-align: middle; } .td:first-child { width: 30px; } .td.special{ width: 50px; } 
     <div class="table"> <div class="caption">Таблица с заданными размерами</div> <div class="tr"> <div class="td">1</div> <div class="td">2</div> </div> <div class="tr"> <div class="td special">1a</div> <div class="td">2</div> </div> <div class="tr"> <div class="td">1</div> <div class="td">2</div> </div> </div>

    Another crutch option for the table:

     table { border: solid 1px blue; border-collapse: collapse; max-width: 500px; width: 100%; height: 100px; table-layout:fixed; } tr { display: flex; width: 100%; } td, th { border: solid 1px blue; padding: 10px; width: 100%; border-left: none; border-top: none; } tr:last-child td, tr:last-child th{ border-bottom: none; } td:first-child, th:first-child { flex-basis: 0; flex-grow:0; } .special{ width: 50px; } 
     <table> <caption>Таблица с заданными размерами</caption> <tr> <th style="width:30px">1</th> <th>2</th> </tr> <tr> <th class="special">1a</th> <th>2</th> </tr> <tr> <th>1</th> <th>2</th> </tr> </table>

    And another option, almost like an e-mail letter:

     table table { border: solid 1px blue; border-collapse: collapse; border-spacing: 0; max-width: 500px; width: 100%; table-layout:fixed; } table table td, table table th { border: solid 1px blue; padding: 10px; } table table td:first-child, table table th:first-child { width: 30px; } table table th.special { width: 50px; } 
     <table> <tr> <td> <table> <tr> <td> Таблица с заданными размерами </td> </tr> </table> <table> <tr> <th>1</th> <th>2</th> </tr> </table> <table> <tr> <th class="special">1a</th> <th>2</th> </tr> </table> <table> <tr> <th>1</th> <th>2</th> </tr> </table> </td> </tr> </table>

    • This is for wp (woocommerce), there is a table with order data in the checkout section, there was a desire not to look for a template, but it would probably not work to fix the css ( - Zhenya Vedenin