Как установить фиксированную ширину для <td>?
У меня есть следующая простая схема:
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
Мне нужно установить фиксированную ширину для <td>. Я пробовал разные подходы:
tr.something {
td {
width: 90px;
}
}
Также я пробовал:
td.something {
width: 90px;
}
для следующего <td>:
<td class="something">B</td>
И даже использовал встроенный стиль:
<td style="width: 90px;">B</td>
Но ширина <td> по-прежнему остается прежней. Как мне установить фиксированную ширину для ячеек таблицы?
5 ответ(ов)
Я сталкивался с такой же проблемой. Я установил фиксированное позиционирование для таблицы и затем указал ширину для ячеек <td>. Если у вас есть заголовки таблицы <th>, то вы также можете задать для них ширину.
Вот пример CSS:
table {
table-layout: fixed;
word-wrap: break-word;
}
И вот пример HTML для ячеек с заданной шириной:
<td style="width:10%">содержимое</td>
Рекомендую использовать CSS для структурирования любых макетов.
Если вы используете <table class="table"> в вашей таблице, класс таблицы Bootstrap устанавливает ширину 100% для таблицы. Вам нужно изменить ширину на auto.
Кроме того, если первая строка вашей таблицы является строкой заголовка, вам может понадобиться установить ширину для элементов th, а не для td.
В вашем случае, чтобы решить эту проблему, я смог использовать min-width: 100px вместо width: 100px для ячеек th или td.
Пример CSS-кода:
.table td, .table th {
min-width: 100px;
}
Таким образом, ячейки таблицы сохранят минимальную ширину в 100 пикселей, что может помочь избежать проблем с переполнением или изменением ширины ячеек.
Bootstrap 4.0
В Bootstrap 4.0 необходимо объявлять строки таблицы как flex-боксы, добавляя класс d-flex. Также следует использовать суффиксы xs, md и т.д., чтобы Bootstrap мог автоматически определять размер в зависимости от области просмотра.
Вот как это будет выглядеть:
<table class="table">
<thead>
<tr class="d-flex">
<th class="col-2">Номер студента</th>
<th class="col-7">Описание</th>
<th class="col-3">Сумма</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2">тест</td>
<td class="col-7">Имя здесь</td>
<td class="col-3">Сумма здесь</td>
</tr>
</tbody>
</table>
Надеюсь, это будет полезно кому-то еще!
С уважением!
Bootstrap 4 и 5 имеют утилиты для задания ширины HTML-элементов. Например, вы можете использовать классы w-* для изменения ширины элемента. Вот пример разметки с использованием этих классов:
<tr class="w-50">
<td class="w-25">A</td>
...
</tr>
В данном примере класс w-50 применён к строке <tr>, что делает её ширину равной 50% от родительского элемента. В то же время класс w-25 применяется к ячейке <td>, устанавливая её ширину на 25%. Это позволяет гибко управлять размерами элементов, используя предустановленные классы Bootstrap.
Как задать cellpadding и cellspacing с помощью CSS?
Как сделать так, чтобы div не был больше своего содержимого?
Как сделать выпадающее меню Twitter Bootstrap по наведению, а не по клику
Перенос слов в HTML-таблице
Добавить нижнюю границу к строке таблицы <tr>