Можно сделать таблицу гибкой?

Question

сейчас для того, чтобы было по 5 в ряд задана ширина 20%

а чтобы было по 2 в ряд - нужно задать 50%

по 3 - width: calc(100% / 3)

есть гибкий вариант?

table {
  width: 100%;
}

th, td {
  width: 20%;
  text-align: center;
  border: 1px solid red;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>35,5</td>
      <td>4</td>
      <td>34</td>
      <td>2.5</td>
      <td>22.5</td>
    </tr>
    <tr>
      <td>36</td>
      <td>4.5</td>
      <td>35</td>
      <td>2.5</td>
      <td>22.5</td>
    </tr>
  </tbody>
</table>

Answer 1

Если колонки должны быть одинаковой (или фиксированной, но не по контенту) ширины:

table, tr, td, th {
  width: 100%;
  border: 1px solid red;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  margin: 1em 0;
}

<table>
  <thead>
    <tr><th>1<th>2<th>3<th>4<th>5</tr>
  </thead>
  <tbody>
    <tr><td>35,5<td>4<td>34<td>2.5<td>22.5</tr>
  </tbody>
</table>

<table>
  <thead>
    <tr><th>1<th>2<th>3<th>4</tr>
  </thead>
  <tbody>
    <tr><td>35,5<td>4<td>34<td>2.5</tr>
  </tbody>
</table>

<table>
  <thead>
    <tr><th>1<th>2<th>3</tr>
  </thead>
  <tbody>
    <tr><td>35,5<td>4<td>34</tr>
  </tbody>
</table>

<table>
  <thead>
    <tr><th>1<th>2</tr>
  </thead>
  <tbody>
    <tr><td>35,5<td>4</tr>
  </tbody>
</table>


<table>
  <thead>
    <tr><th>1</tr>
  </thead>
  <tbody>
    <tr><td>35,5</tr>
  </tbody>
</table>

БЛОГ НА HUSL

Можно сделать таблицу гибкой?

Ответы (1 шт):