Простая схема:
<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 class="something">B</td>
И даже
<td style="width: 90px;">B</td>
Но ширина <td>
остается прежней.
В Bootstrap 4.0.0 вы не можете использовать col-*
надежно (работает в Firefox, но не в Chrome). Вам нужно использовать ответ OhadR:
<tr>
<th style="width: 16.66%">Col 1</th>
<th style="width: 25%">Col 2</th>
<th style="width: 50%">Col 4</th>
<th style="width: 8.33%">Col 5</th>
</tr>
В Twitter начальной загрузки 3 используйте: class="col-md-*"
где * - количество столбцов ширины.
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
</tr>
В Twitter начальной загрузки 2 используйте: class="span*"
где * - количество столбцов ширины.
<tr class="something">
<td class="span2">A</td>
<td class="span3">B</td>
<td class="span6">C</td>
<td class="span1">D</td>
</tr>
** Если у вас есть элементы <th>
установите ширину там, а не на элементы <td>
.
У меня была такая же проблема, я сделал таблицу фиксированной, а затем указала мою ширину td. Если у вас есть, вы тоже можете это сделать.
table {
table-layout: fixed;
word-wrap: break-word;
}
Шаблон:
<td style="width:10%">content</td>
Пожалуйста, используйте CSS для структурирования любых макетов.
class
в теге td
вместо непосредственного применения стиля
Вместо применения классов col-md-*
к каждому td
в строке вы можете создать colgroup
и применить классы к тегу col
.
<table class="table table-striped">
<colgroup>
<col class="col-md-4">
<col class="col-md-7">
</colgroup>
<tbody>
<tr>
<td>Title</td>
<td>Long Value</td>
</tr>
</tbody>
</table>
Демо здесь
Если вы используете <table class="table">
в своей таблице, класс таблицы Bootstrap добавляет ширину 100% к таблице. Вам нужно изменить ширину на авто.
Кроме того, если первая строка вашей таблицы является строкой заголовка, вам может потребоваться добавить ширину к th, а не td.
th
в нормальное состояние, поскольку в настоящее время оно перезаписывается, поскольку такие заголовки не ломаются.
В моем случае я смог исправить эту проблему, используя min-width: 100px
вместо width: 100px
для ячеек th
или td
.
.table td, .table th {
min-width: 100px;
}
Надеюсь, это поможет кому-то:
<table class="table">
<thead>
<tr>
<th style="width: 30%">Col 1</th>
<th style="width: 20%">Col 2</th>
<th style="width: 10%">Col 3</th>
<th style="width: 30%">Col 4</th>
<th style="width: 10%">Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1</td>
<td>Val 2</td>
<td>Val 3</td>
<td>Val 4</td>
<td>Val 5</td>
</tr>
</tbody>
</table>
Для Bootstrap 4 вы можете просто использовать помощник класса:
<table class="table">
<thead>
<tr>
<td class="w-25">Col 1</td>
<td class="w-25">Col 2</td>
<td class="w-25">Col 3</td>
<td class="w-25">Col 4</td>
</tr>
</thead>
<tbody>
<tr>
...
Попробуйте это -
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
text-overflow: ellipsis
чтобы убедиться, что обрезанный текст очевиден
Это комбинированное решение работало для меня, я хотел, чтобы столбцы равной ширины
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
table th, table td {
overflow: hidden;
}
</style>
Результат: -
В Bootstrap 4.0 мы должны объявить строки таблицы как flex-box, добавив класс d-flex, а также отбросить суффиксы xs, md, чтобы Bootstrap автоматически выводил их из области просмотра.
Так будет выглядеть следующее:
<table class="table">
<thead>
<tr class="d-flex">
<th class="col-2"> Student No. </th>
<th class="col-7"> Description </th>
<th class="col-3"> Amount </th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2">test</td>
<td class="col-7">Name here</td>
<td class="col-3">Amount Here </td>
</tr>
</table>
Надеюсь, что это будет полезно для кого-то еще там!
Ура!
Хорошо, я просто выяснил, в чем проблема: в Bootstrap устанавливается значение по умолчанию width
для элемента select
, таким образом, решение:
tr. something {
td {
select {
width: 90px;
}
}
}
Что-то еще не работает.
Я некоторое время боролся с проблемой, поэтому на случай, если кто-то сделает ту же глупую ошибку, что и я...
Внутри <td>
у меня был элемент с стилем white-space:pre
. Это заставило все мои трюки таблицы /tr/td отбросить. Когда я удалил этот стиль, вдруг весь текст был хорошо отформатирован внутри td
.
Итак, всегда проверяйте основной контейнер (например, table
или td
), но также всегда проверяйте, не отмените ли ваш код лучше где-нибудь глубже:)
Трудно судить без контекста страницы html или остальной части вашего CSS. Возможно, существует множество причин, почему ваше правило CSS не влияет на элемент td.
Вы пробовали более конкретные селектора CSS, такие как
tr.somethingontrlevel td.something {
width: 90px;
}
Это, чтобы ваш CSS был переопределен более конкретным правилом из bootstrap css.
(кстати, в вашем встроенном примере css с атрибутом style вы ошибочно указали ширину - это может объяснить, почему эта попытка не удалась!)
Ничего из этого не работает для меня, и у меня есть много столбцов в datatable, чтобы класс% или sm равнялся разметке 12 элементов при начальной загрузке.
Я работал с таблицами данных Angular 5 и Bootstrap 4, и у меня в таблице много столбцов. Решение для меня было в TH
чтобы добавить элемент DIV
с определенной шириной. Например, для столбцов "Имя человека" и "Дата события" мне нужна конкретная ширина, затем поместите div
в заголовок столбца, вся ширина столбца затем изменится на ширину, указанную в элементе div на TH
:
<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
<thead class="thead-dark">
<tr>
<th scope="col">ID </th>
<th scope="col">Value</th>
<th scope="col"><div style="width: 600px;">Person Name</div></th>
<th scope="col"><div style="width: 800px;">Event date</div></th> ...
использовать. что- то без тд или й
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.something {
width: 90px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<h2>Fixed width column</h2>
<table class="table table-bordered">
<thead>
<tr>
<th class="something">Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>