Простая схема:
<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 для структурирования любых макетов.
Вместо применения классов 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.
Надеюсь, это поможет кому-то:
<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>
В моем случае я смог исправить эту проблему, используя min-width: 100px вместо width: 100px для ячеек th или td.
.table td, .table th {
min-width: 100px;
}
Для 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>
Это комбинированное решение работало для меня, я хотел, чтобы столбцы равной ширины
<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;
}
}
}
Что-то еще не работает.
Трудно судить без контекста страницы html или остальной части вашего CSS. Возможно, существует множество причин, почему ваше правило CSS не влияет на элемент td.
Вы пробовали более конкретные селектора CSS, такие как
tr.somethingontrlevel td.something {
width: 90px;
}
Это, чтобы ваш CSS был переопределен более конкретным правилом из bootstrap css.
(кстати, в вашем встроенном примере css с атрибутом style вы ошибочно указали ширину - это может объяснить, почему эта попытка не удалась!)
Я некоторое время боролся с проблемой, поэтому на случай, если кто-то сделает ту же глупую ошибку, что и я...
Внутри <td> у меня был элемент с стилем white-space:pre. Это заставило все мои трюки таблицы /tr/td отбросить. Когда я удалил этот стиль, вдруг весь текст был хорошо отформатирован внутри td.
Итак, всегда проверяйте основной контейнер (например, table или td), но также всегда проверяйте, не отмените ли ваш код лучше где-нибудь глубже:)
использовать. что- то без тд или й
<!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>Ничего из этого не работает для меня, и у меня есть много столбцов в 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> ...
Используйте d-flex вместо строки для "tr" в Bootstrap 4
Дело в том, что класс "row" занимает больше ширины, чем родительский контейнер, что создает проблемы.
<table class="table">
<tbody>
<tr class="d-flex">
<td class="col-sm-8">Hello</td>
<td class="col-sm-4">World</td>
</tr>
<tr class="d-flex">
<td class="col-sm-8">8 columns</td>
<td class="col-sm-4">4 columns</td>
</tr>
</tbody>
</table>
<div class="row" id="divcashgap" style="display:none">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-default" id="gvcashgapp">
<thead>
<tr>
<th class="1">BranchCode</th>
<th class="2"><a>TC</a></th>
<th class="3">VourNo</th>
<th class="4" style="min-width:120px;">VourDate</th>
<th class="5" style="min-width:120px;">RCPT Date</th>
<th class="6">RCPT No</th>
<th class="7"><a>PIS No</a></th>
<th class="8" style="min-width:160px;">RCPT Ammount</th>
<th class="9">Agging</th>
<th class="10" style="min-width:160px;">DesPosition Days</th>
<th class="11" style="min-width:150px;">Bank Credit Date</th>
<th class="12">Comments</th>
<th class="13" style="min-width:150px;">BAC Comment</th>
<th class="14">BAC Ramark</th>
<th class="15" style="min-width:150px;">RAC Comment</th>
<th class="16">RAC Ramark</th>
<th class="17" style="min-width:120px;">Update Status</th>
</tr>
</thead>
<tbody id="tbdCashGapp"></tbody>
</table>
</div>
</div>
</div>