Как получить <td> в таблицах HTML в соответствии с контентом, а также указать конкретный <td> заполнить остальные

Это гипотетический пример:

table, thead, tbody, tr { width: 100%; }
    table { table-layout: fixed }
    table > thead > tr > th { width: auto; }

<table>
      <thead>
        <tr>
          <th>Column A</th>
          <th>Column B</th>
          <th>Column C</th>
          <th class="absorbing-column">Column D</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data A.1 lorem</td>
          <td>Data B.1 ip</td>
          <td>Data C.1 sum l</td>
          <td>Data D.1</td>
        </tr>
        <tr>
          <td>Data A.2 ipsum</td>
          <td>Data B.2 lorem</td>
          <td>Data C.2 some data</td>
          <td>Data D.2 a long line of text that is long</td>
        </tr>
        <tr>
          <td>Data A.3</td>
          <td>Data B.3</td>
          <td>Data C.3</td>
          <td>Data D.3</td>
        </tr>
      </tbody>
    </table>

Ответ 1

Определить ширину. абсорбирующего столбца

Установите table-layout в auto и задайте максимальную ширину на .absorbing-column.

Здесь я установил width в 100%, потому что он гарантирует, что этот столбец займет максимально допустимое пространство, а столбцы без определенной ширины уменьшатся, чтобы соответствовать их содержимому, и не далее.

Это одно из самых причудливых преимуществ поведения таблиц. Алгоритм table-layout: auto математически прощает.

Вы даже можете выбрать min-width для всех элементов td, чтобы они не становились слишком узкими, и таблица будет вести себя хорошо.

table {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
}
table td {
    border: 1px solid #ccc;
}
table .absorbing-column {
    width: 100%;
}

<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>

Ответ 2

demo - http://jsfiddle.net/victor_007/ywevz8ra/

добавлена граница для лучшего просмотра (тестирования)

Дополнительная информация о белом пространстве

table{
    width:100%;
}
table td{
    white-space: nowrap;  /** added **/
}
table td:last-child{
    width:100%;
}

    table {
      width: 100%;
    }
    table td {
      white-space: nowrap;
    }
    table td:last-child {
      width: 100%;
    }

<table border="1">
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>

Ответ 3

Установка ширины CSS до 1% или 100% элемента в соответствии со всеми спецификациями, которые я смог узнать, связана с родителем. Хотя Blink Rendering Engine (Chrome) и Gecko (Firefox) на момент написания статьи, похоже, обрабатывают 1% или 100% (упрощают сокращение столбцов или столбцы для заполнения свободного места), это не гарантируется в соответствии со всеми спецификациями CSS Я мог бы найти его правильно.

Один из вариантов заключается в замене таблицы на гибкие разделители CSS4:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Это работает в новых браузерах, то есть IE11 +, см. таблицу в нижней части статьи.

Ответ 4

использовать переполнение:

overflow: visible;