Колонки таблицы равной ширины

254

17 марта 2019, 15:50

Я создаю таблицу и выставляю в процентах ширину каждого столбца. Для примера, второй столбец должен иметь ширину в 30%, четвертый — 10% .Это работает во многих случаях, но, если название колонки длинное, ширина всего столбца расширяется до ширина названия колонки. Каким образом можно избежать такого поведения, создать таблицу с жестко выставленной (в процентах) шириной столбцов?

table { 
  width: 100% 
} 
 
table>tbody>tr>td { 
  width: 20% 
} 
 
table>thead>tr>th { 
  padding: 10px; 
  overflow: hidden; 
} 
 
table>tbody>tr>td:nth-of-type(2) { 
  width: 30% 
} 
 
table>tbody>tr>td:nth-of-type(4) { 
  width: 10% 
}

<table border=1> 
  <thead> 
    <tr> 
      <th colspan=3>Group 1</th> 
      <th colspan=2>Group 2</th> 
    </tr> 
    <tr> 
      <th colspan=1>Group 3</th> 
      <th colspan=4>Group 4</th> 
    </tr> 
    <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>Column 3</th> 
      <th>TooLongColumn4Title</th> 
      <th>Column 5</th> 
    </tr> 
  </thead> 
 
  <tbody> 
    <tr> 
      <td>Value 1</td> 
      <td>Value 2</td> 
      <td>Value 3</td> 
      <td>Value 4</td> 
      <td>Value 5</td> 
    </tr> 
    <tr> 
      <td>Value 1</td> 
      <td>Value 2</td> 
      <td>Value 3</td> 
      <td>Value 4</td> 
      <td>Value 5</td> 
    </tr> 
    <tr> 
      <td>Value 1</td> 
      <td>Value 2</td> 
      <td>Value 3</td> 
      <td>Value 4</td> 
      <td>Value 5</td> 
    </tr> 
     
  </tbody> 
   
</table>

Answer 1

Задайте таблице word-break: break-all

table { 
  width: 100%; 
  word-break: break-all; 
} 
table>tbody>tr>td { 
  width: 20% 
} 
 
table>thead>tr>th { 
  padding: 10px; 
  overflow: hidden; 
} 
 
table>tbody>tr>td:nth-of-type(2) { 
  width: 30% 
} 
 
table>tbody>tr>td:nth-of-type(4) { 
  width: 10% 
}

<table border=1> 
  <thead> 
    <tr> 
      <th colspan=3>Group 1</th> 
      <th colspan=2>Group 2</th> 
    </tr> 
    <tr> 
      <th colspan=1>Group 3</th> 
      <th colspan=4>Group 4</th> 
    </tr> 
    <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>Column 3</th> 
      <th>TooLongColumn4Titlesfsgfsfgsdfg</th> 
      <th>Column 5</th> 
    </tr> 
  </thead> 
 
  <tbody> 
    <tr> 
      <td>Value 1</td> 
      <td>Value 2</td> 
      <td>Value 3</td> 
      <td>Value 4</td> 
      <td>Value 5</td> 
    </tr> 
    <tr> 
      <td>Value 1</td> 
      <td>Value 2</td> 
      <td>Value 3</td> 
      <td>Value 4</td> 
      <td>Value 5</td> 
    </tr> 
    <tr> 
      <td>Value 1</td> 
      <td>Value 2</td> 
      <td>Value 3</td> 
      <td>Value 4</td> 
      <td>Value 5</td> 
    </tr> 
     
  </tbody> 
   
</table>