Установить постоянную ширину столбца таблицы независимо от объема текста в ее ячейках?
-
10-10-2019 - |
Вопрос
В моей таблице я установил ширину первой ячейки в столбце равной 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>
У этого парня была похожая проблема: Ширина ячеек таблицы - фиксирование ширины, перенос / усечение длинных слов
Другие советы
Видеть: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;
Я делаю:
Установите ширину TD:
<td width="200" height="50"><!--blaBlaBla Contents here--></td>
Установите ширину TD с помощью CSS:
<td style="width:200px; height:50px;">
Установите ширину снова как Макс и Мин с 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>
У Касуна правильная идея. Вот правильный код ...
<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>
<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
Согласно моим ответам здесь, также возможно использовать столовая головка (который может быть пустым) и применить относительную ширину для каждой ячейки головки таблицы. Ширина всех клеток в теле таблицы будет соответствовать ширине головки колонки. Пример:
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
Как предполагалось в ответе Хайатина.
Установка этого:
style="min-width:100px;"
Работал на меня.
Я обнаружил, что ответ Касуна работает лучше, используя VW вместо пк вот так:
<td><div style="width: 10vw" >...............</div></td>
Это был единственный стиль, который мне нужен, чтобы настроить ширину столбца
Вам не нужно устанавливать "fixed"
- Все, что вам нужно, это настройка overflow:hidden
Поскольку ширина столбца установлена.