I need the tables to be as wide as in the picture. enter image description here

I tried to do this:

.table { margin-top: 35px; } .table table { width: 100%; } .table table tr, .table table th, .table table td { border: 3px solid #4a275c; text-align: center; padding: 10px 17px; font-size: 14px; font-weight: 400; } .table table th { color: #4a275c; } .table table td { padding: 17px; } 
 <div class="table"> <table> <tr> <th>TYP</th> <th>Привод</th> <th>Давление [bar]</th> <th>Производительность [m³/min]</th> <th>Мощность [kW]</th> <th>Ресивер [литры]</th> </tr> <tr> <td>ST 30+</td> <td>ремень</td> <td>7,5/8,5/10/13</td> <td>6,1/5,9/5,2/4,5</td> <td>30</td> <td>-</td> </tr> </table> </div> <div class="table"> <table> <tr> <th>TYP</th> <th>шум [db]</th> <th>вес [kg]</th> <th>Габариты [ДхШхВ]</th> </tr> <tr> <td>ST 30+</td> <td>66</td> <td>900</td> <td>1876x1288x1680</td> </tr> </table>

It turns out that both are stretched to 100% of the parent. If you do not stretch by 100%, they both are smaller than the size you need.

In general, you need to achieve the result as in the picture. I would be grateful for the help.

    2 answers 2

    Add an extra class to the bottom table and specify the size of the bottom table separately. For example:

     .table { margin-top: 35px; } .small-table table{ width: 60%; } .table table { width: 100%; } .table table tr, .table table th, .table table td { border: 3px solid #4a275c; text-align: center; padding: 10px 17px; font-size: 14px; font-weight: 400; } .table table th { color: #4a275c; } .table table td { padding: 17px; } 
     <div class="table"> <table> <tr> <th>TYP</th> <th>Привод</th> <th>Давление [bar]</th> <th>Производительность [m³/min]</th> <th>Мощность [kW]</th> <th>Ресивер [литры]</th> </tr> <tr> <td>ST 30+</td> <td>ремень</td> <td>7,5/8,5/10/13</td> <td>6,1/5,9/5,2/4,5</td> <td>30</td> <td>-</td> </tr> </table> </div> <div class="table small-table"> <table> <tr> <th>TYP</th> <th>шум [db]</th> <th>вес [kg]</th> <th>Габариты [ДхШхВ]</th> </tr> <tr> <td>ST 30+</td> <td>66</td> <td>900</td> <td>1876x1288x1680</td> </tr> </table>

      One of the options is an example on jsbin :

       * { box-sizing: border-box; } .table table td:nth-of-type(1){ width: 70px; } .table table td:nth-of-type(2){ width: 100px; } .table table td:nth-of-type(3){ width: 150px; } .table table td:nth-of-type(4){ width: 200px; } .table { margin-top: 35px; } .table table { width: 100%; border-spacing: 0px; } .table-s table { width: inherit; } .table table tr, .table table th, .table table td { text-align: center; padding: 10px 17px; font-size: 14px; font-weight: 400; } .table table th, .table table td { border: 3px solid #4a275c; border-right: none; border-bottom: none; } .table table tr:last-of-type td { border-bottom: 3px solid #4a275c; } .table table th:last-of-type, .table table td:last-of-type { border-right: 3px solid #4a275c; } .table table th { color: #4a275c; } .table table td { padding: 17px; } 
       <div class="table"> <table> <tr> <th>TYP</th> <th>Привод</th> <th>Давление [bar]</th> <th>Производительность [m³/min]</th> <th>Мощность [kW]</th> <th>Ресивер [литры]</th> </tr> <tr> <td>ST 30+</td> <td>ремень</td> <td>7,5/8,5/10/13</td> <td>6,1/5,9/5,2/4,5</td> <td>30</td> <td>-</td> </tr> </table> </div> <div class="table table-s"> <table> <tr> <th>TYP</th> <th>шум [db]</th> <th>вес [kg]</th> <th>Габариты [ДхШхВ]</th> </tr> <tr> <td>ST 30+</td> <td>66</td> <td>900</td> <td>1876x1288x1680</td> </tr> </table>