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

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

Я немного поиграл с этим, потому что мне было трудно понять это.

Вы должны установить ширину ячейки (либо thили tdработал, я установил оба) и установить table-layoutв fixed. По некоторым причинам ширина ячейки, кажется, остается неизменной, только если ширина таблицы тоже установлена ​​(я думаю, что это глупо, но все же).

Также полезно установить overflowсвойство так, чтобы hiddenлюбой дополнительный текст не выходил из таблицы.

Вы также должны оставить все границы и размеры для CSS.

Итак, вот что у меня есть:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Вот это в JSFiddle

У этого парня была похожая проблема: ширина ячейки таблицы - фиксирование ширины, перенос / усечение длинных слов

Смотрите: http://www.html5-tutorials.org/tables/changing-column-width/

После тега таблицы используйте элемент col. вам не нужен закрывающий тег.

Например, если у вас было три столбца:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Просто добавьте <div>тег внутрь <td>или <th>определите ширину внутри <div>. Это поможет вам. Больше ничего не работает.

например.

<td><div style="width: 50px" >...............</div></td>

Если вам нужно на один или несколько столбцов фиксированной ширины, в то время как размер других столбцов должен изменяться, попробуйте установить оба min-widthи max-widthодно и то же значение.

Вам нужно написать это внутри соответствующего CSS

table-layout:fixed;

Что я делаю это:

1. Установите ширину тд:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Установите ширину td с помощью CSS:

   <td style="width:200px; height:50px;">

3. Установите ширину снова как max и min с помощью CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Это звучит немного повторно, но дает мне желаемый результат. Для этого вам может понадобиться поместить значения CSS в класс в вашей таблице стилей:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

тогда:

<td class="td_size">

Поместите атрибут класса в любое место <td>.

Я использовал это

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

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

CSS:

.special_column { width: 120px; }

HTML:

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

Помогает также вставить последнюю "ячейку-заполнитель" с шириной: авто . Это займет оставшееся пространство и оставит все другие размеры, как указано.

Сделайте так, чтобы принятый ответ отвечал для маленьких экранов, когда они меньше фиксированной ширины

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Установка этого:

style="min-width:100px;" 

Работал на меня.

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>

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

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как предложено в ответе Hyathin.

Я использую элемент :: after в ячейке, где я хочу установить минимальную ширину независимо от присутствующего текста, например:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Мне не нужно устанавливать ширину на родительском столе или использовать макет таблицы.

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

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

Это был единственный стиль, который мне нужен, чтобы настроить ширину столбца.

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