Установить постоянную ширины столбца таблицы независимо от количества текста в ее ячейках?

Question

В моей таблице я установил ширину первой ячейки в столбце, равную 100px.Однако когда текст в одной из ячеек в этом столбце слишком длинный, ширина столбца становится больше 100px.Как я могу отключить это расширение?

Answer 1

KAsun имеет правильную идею.Вот правильный код ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Answer 2

Если вам не нужен фиксированный макет, укажите класс для столбца с соответствующим размером.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Answer 3

Согласно моему ответу здесь , также возможно использовать заголовок таблицы (который может быть пустым) и применять относительную ширину для каждой ячейки заголовка таблицы.Ширина всех ячеек в теле таблицы будет соответствовать ширине заголовка их столбца.Пример:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Результат просмотра

В качестве альтернативы используйте colgroup, как указано в ответе Хиатина.

Answer 4

Я нашел, что ответ KAsun работает лучше, используя vw вместо px примерно так:

<td><div style="width: 10vw" >...............</div></td>

Это был единственный стиль, который янеобходимо отрегулировать ширину столбца

Answer 5

Вам не нужно устанавливать "fixed" - все, что вам нужно, это установить overflow:hidden, так как ширина столбца установлена.