Установить постоянную ширины столбца таблицы независимо от количества текста в ее ячейках? - PullRequest
487 голосов
/ 16 декабря 2010

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

Ответы [ 15 ]

563 голосов
/ 16 декабря 2010

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

Вам необходимо установить ширину ячейки (либо 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

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

152 голосов
/ 08 апреля 2013

См .: http://www.html5 -tutorials.org / tables / changeing-column-width /

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

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

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>
120 голосов
/ 07 мая 2012

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

например.

<td><div style="width: 50px" >...............</div></td>
62 голосов
/ 06 сентября 2012

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

28 голосов
/ 16 декабря 2010

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

table-layout:fixed;
21 голосов
/ 26 июня 2012

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

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

    <td width="200" height="50"><!--blaBlaBla Contents here--></td>
    
  2. Установить ширину тд с помощью 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>.

2 голосов
/ 04 мая 2015

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

2 голосов
/ 11 мая 2013

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

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

.app_downloads_table tr td:last-child {
    text-align: center;
}
1 голос
/ 30 мая 2019

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

style="min-width:100px;" 

работал для меня.

1 голос
/ 03 июня 2017

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

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/

...