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


535

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


5
stackoverflow.com/questions/1258416/word-wrap-in-a-html-table может помочь указать вам правильное направление
Джастин

2
В моем случае произошло не расширение, а наоборот: нежелательное сжатие ширины, несмотря на мое явное объявление ширины. Смешной!
Чаба Тот

Единственное правильное решение - использовать colgroup с cols и установить ширину cols.
MightyPork

table-layout:fixed;такое решение
emfi

Ответы:


607

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

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

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


77
Важно отметить следующее: «Браузер будет устанавливать ширину столбцов на основе ширины ячеек в первом ряду таблицы», из stackoverflow.com/questions/570154/…
daniloquio

12
Это работает, когда ширина таблицы не фиксирована. jsfiddle.net/lavinski/CGCFW/3 Вам просто нужен динамический ряд, чтобы занять оставшееся пространство.
Даниэль Литтл

2
@DanielLittle или вы можете установить ширину таблицы в 1px; с overflow: visibleдля таблиц динамического размера, до тех пор , пока размер ячеек фиксирован и перелив виден , что не имеет значение , если размер самой таблицы больше или меньше , чем фактические клетки.
Ман

Что вы могли бы сделать, если ваш тд имеет "ширина = 30%;"
71GA

Пожалуйста, добавьте переполнение: hidden @ RokoC.Buljan
Алекс Гранде

178

Смотрите: 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>

26
Эта! Это ответ HTML5, и он безумно работает без необходимости прыгать через глупые обручи. Кроме того, вы можете использовать <col class = "someClassName"> вместо этого, чтобы сохранить ширину в CSS и не загрязнять ваш HTML информацией о стиле.
Джон Мюнш,

2
@ Сэм, возможно, у вас возникли другие проблемы, такие как CSS, встроенный стиль или неправильный тип документа и т. Д. Это определенно работает, это стандартный способ установки стилей столбцов.
Самер Алибхай

Я не уверен, что это «путь HTML5» вообще. Похоже, что colgroup / col в html5 действительно используется только для маркировки промежутков. MDN не упоминает об использовании атрибута style в тегах col (кроме того, что он наследует его от глобальных атрибутов) и говорит только о bgcolor: «... использовать свойство CSS ... в соответствующих элементах <td>». developer.mozilla.org/en-US/docs/Web/HTML/Element/col .
Стивен Панцер

5
Работал для меня со стилем таблицы table-layout: fixed; width: 100%;. Спасибо!
Nrodic

Это не конец / окончательно, но w3schools также не упоминает использование colдля этого. Он предлагает использовать CSS для <td>(или <th>) - w3schools.com/tags/att_td_width.asp
Дон Чидл

128

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

например.

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

2
Я объединил это решение с указанием min-width / max-width для той же ширины пикселей, чтобы быть на безопасной стороне. Наконец-то это работает. Я не знаю, почему я должен запустить все эти дополнительные раунды, просто чтобы это было действительно исправлено, смешно ...
Чаба Тот

1
Неуверенный , как это лучше , чем установка того же CSS style="width: 50px"на<td>
Дон Чидл

2
@mmcrae Это лучше, потому что это работает, а установка ширины <td>- нет.
Madbreaks

66

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


Это работало для меня, когда установка ширины явно с table-layout: fixed;не.
Джордан Мак

Ебена мать! Ни одно из других решений не работало или не было слишком неуклюжим! Это сработало отлично! Див тоже не требуется!
NeilRoy

29

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

table-layout:fixed;

лучше сортировать таблицу с тегами div, тогда внутри div использовать переполнение: auto
vinoth kumar

Сработало для меня, когда я объединил его с группами столбцов: <table style = "table-layout: fixed"> <colgroup> <col style = "width: 50%"> <col style = "width: 50%"> </ COLGROUP> <TBODY> ... </ TBODY> </ table>.
Расс Бейтман

Эта статья Криса Койера объясняет это хорошо: css-tricks.com/fixing-tables-long-strings
cssyphus

24

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

  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>.


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

3

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

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

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

Не забудьте ntch-child (2) (или 3, 4 и т. Д.)

таблица td nth-child (n + 1) {...} охватит все, кроме первого столбца
Эд Рэндалл,

2

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

CSS:

.special_column { width: 120px; }

HTML:

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

2

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


2

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

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/



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>

1

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

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.


0

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

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

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


-4

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

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

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


-5

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


3
Который будет скрывать контент за границами ячеек, не очень хорошая идея.
Mystrdat
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.