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

Question

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

Answer 1

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

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

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

Answer 2

Видеть: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>

Answer 3

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

например.

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

Answer 4

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

Answer 5

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

table-layout:fixed;

Answer 6

Я делаю:

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

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

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

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

3. Установите ширину снова как Макс и Мин с 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> ты хочешь.

Answer 7

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

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

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

Answer 8

Это также помогает вставить в последнюю «наполнительную ячейку», с Ширина: Авто. Анкет Это займет оставшееся пространство и оставит все другие измерения, как указано.

Answer 9

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

CSS:

.special_column { width: 120px; }

HTML:

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

Answer 10

У Касуна правильная идея. Вот правильный код ...

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

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

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/

Answer 12

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

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 13

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

style="min-width:100px;" 

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

Answer 14

Я обнаружил, что ответ Касуна работает лучше, используя VW вместо пк вот так:

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

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

Answer 15

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