Простая схема:
<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 вы не можете использовать коль-*
классы надежную (работает в 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 Использование: класс="и коль-МД-*"
В где * - количество столбцов в ширину.
<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 использовать: класс="в пролете*"
В где * - количество столбцов в ширину.
<tr class="something">
<td class="span2">A</td>
<td class="span3">B</td>
<td class="span6">C</td>
<td class="span1">D</td>
</tr>
** Если у вас есть в <ом> У
элементы установить ширину там, а не на <тд>
элементов.
У меня был тот же вопрос, я сделал таблицу фиксированной и указал мой тд ширине. Если у вас есть че можно сделать также.
table {
table-layout: fixed;
word-wrap: break-word;
}
Шаблон:
<td style="width:10%">content</td>
Пожалуйста, используйте CSS для структурирования каких-либо макетов.
Вместо применения коль-МД-*
мастер-классы тд
в строке вы можете создать элемент colgroup и применить классы к тегу седла
.
<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'table добавляет таблице ширину 100%. Вам нужно изменить ширину на auto.
Также, если первая строка вашей таблицы является строкой заголовка, вам может понадобиться добавить ширину к 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>
В моем случае я был в состоянии исправить эту проблему с помощью мин-ширина: 100 пикселей
вместо ширина: 100 пикселей
ячеек й
или ТД
.
.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-коробки путем добавления класса D-флекс, а также падение хз, МД, суффиксы, чтобы загрузчик автоматически выводят его из просмотра.
Так он будет выглядеть следующим образом:
<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 вы неправильно написали width - это может объяснить, почему эта попытка не удалась!)
Я'вэ боролся с такой проблемой на некоторое время, так только в том случае, когда кто-то делает ту же глупую ошибку, как и я...
Внутри в <тд>
у меня был элемент белый-пространство:стиль пре-прикладной. Что делало все мои таблицы/тр/тд уловок, которые выбрасывают. Когда я убрал этот стиль, вдруг весь мой текст был хорошо отформатирован внутри
тд`.
Поэтому, всегда проверяйте основного контейнера (аналогично Table
или тд
), но также, Всегда проверяйте, если вы не'т отменить свой красивый где-то глубже код :)
Использование гибкого вместо строки и"ТР" в ушко 4
Дело в том, что "подряд" класс занимает больше ширины родительского контейнера, который представляет проблем.
в
<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>
в
использования .что-то не ТД или й
в
<!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, чтобы сделать % или класс см равна 12 элементов макета на Bootstrap.
Я работал с таблицами 5 угловых и Bootstrap 4, и есть много столбцов в таблице. Решение для меня было в Й
добавить элемент див
с определенной ширины. Например, для седла "в лицо" и "Событие дата" Я нужен определенной ширины, затем положить див
в столбец заголовка, всего коль ширина затем изменяется до заданной ширины от div на "й":
<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> ...
В bootstarp 4 Вы можете использовать подряд
и коль-*
в таблице, я использую его, как показано ниже
<table class="table">
<thead>
<tr class="row">
<th class="col-sm-3">3 row</th>
<th class="col-sm-4">4 row</th>
<th class="col-sm-5">5 row</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-sm-3">some text</td>
<td class="col-sm-4">some text</td>
<td class="col-sm-5">some text</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>
в