Bootstrap-jak ustawić stałą szerokość?
Prosty schemat:
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
Muszę ustawić stałą szerokość dla <td>
. Próbowałem:
tr.something {
td {
width: 90px;
}
}
Również
td.something {
width: 90px;
}
Dla
<td class="something">B</td>
I nawet
<td style="width: 90px;">B</td>
Ale szerokość {[5] } jest nadal taka sama.
15 answers
Dla Bootstrap 4.0:
W Bootstrap 4.0.0 nie można używać klas col-*
niezawodnie(działa w Firefoksie, ale nie w Chrome).
Musisz użyć OhadR ' s answer :
<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>
Dla Bootstrap 3.0:
Z twitter bootstrap 3 Użyj: class="col-md-*"
Gdzie * jest liczbą kolumn o szerokości.
<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>
Dla Bootstrap 2.0:
Z twitter bootstrap 2 Użyj: class="span*"
Gdzie * jest liczbą kolumn o szerokości.
<tr class="something">
<td class="span2">A</td>
<td class="span3">B</td>
<td class="span6">C</td>
<td class="span1">D</td>
</tr>
** Jeśli masz <th>
Elementy Ustaw szerokość tam, a nie na elementach <td>
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-23 11:26:27
Miałem ten sam problem, zrobiłem tabelę poprawioną, a następnie określiłem moją szerokość td. Jeśli masz th można zrobić te, jak również.
table {
table-layout: fixed;
word-wrap: break-word;
}
Szablon:
<td style="width:10%">content</td>
Proszę używać CSS do strukturyzowania dowolnych układów.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-25 22:32:54
Zamiast stosować klasy col-md-*
do każdej td
w wierszu, możesz utworzyć colgroup
i zastosować klasy do znacznika 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>
Demo tutaj
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-30 03:17:50
Jeśli używasz <table class="table">
na swoim stole, Klasa table Bootstrap dodaje do tabeli 100% szerokości. Musisz zmienić szerokość na auto.
Ponadto, jeśli pierwszy wiersz tabeli jest wierszem nagłówka, może być konieczne dodanie szerokości do th zamiast td.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-27 15:08:52
W moim przypadku udało mi się rozwiązać ten problem używając min-width: 100px
zamiast width: 100px
dla komórek th
lub td
.
.table td, .table th {
min-width: 100px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-16 06:24:11
Mam nadzieję, że ten komuś pomoże:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-04 22:19:28
Dla Bootstrap 4, możesz po prostu użyć pomocnika klasy:
<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>
...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-07 10:23:15
Spróbuj tego -
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-30 06:24:17
To połączone rozwiązanie działało dla mnie, chciałem kolumn o równej szerokości
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
table th, table td {
overflow: hidden;
}
</style>
Wynik:-
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-06 13:06:36
Ok, właśnie zorientowałem się, gdzie jest problem - w Bootstrap jest ustawiony jako domyślna wartość width
dla select
elementu, więc rozwiązaniem jest:
tr. something {
td {
select {
width: 90px;
}
}
}
Wszystko inne mi nie działa.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-27 15:06:04
Trudno ocenić bez kontekstu strony html lub reszty CSS. Może istnieć z milion powodów, dla których Twoja reguła CSS nie wpływa na element td.
Czy próbowałeś bardziej konkretnych selektorów CSS, takich jak
tr.somethingontrlevel td.something {
width: 90px;
}
Aby uniknąć nadpisania CSS przez bardziej szczegółową regułę z css bootstrap.
(przy okazji, w próbce inline css z atrybutem style, błędnie napisałeś szerokość - to może wyjaśniać, dlaczego ta próba się nie powiodła!)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-27 14:56:54
Od jakiegoś czasu zmagam się z tym problemem, więc na wypadek, gdyby ktoś popełnił ten sam głupi błąd co ja...
Wewnątrz <td>
zastosowałem element ze stylem white-space:pre
. To sprawiło, że wszystkie moje sztuczki table/tr/td zostały odrzucone. Kiedy usunąłem ten styl, nagle cały mój tekst został ładnie sformatowany wewnątrz td
.
Więc zawsze sprawdzaj główny kontener (jak table
lub td
), ale również zawsze sprawdzaj, czy nie anulujesz kodu beautifull gdzieś głębiej:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-21 11:39:34
Bootstrap 4.0
W Bootstrap 4.0, musimy zadeklarować wiersze tabeli jako flex-Box, dodając klasę D-flex, a także upuść przyrostki xs, md, aby Bootstrap mógł automatycznie wyprowadzać je z widoku.
Więc będzie wyglądać następująco:
<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>
Mam nadzieję, że to będzie pomocne dla kogoś innego tam!
Zdrówko!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-20 08:28:45
Użyj .coś Bez td lub 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-15 01:55:18
Nic z tego nie działa dla mnie, i mają wiele cols na datatable, aby % Lub sm klasa była równa 12 elementom układu na bootstrap.
Pracowałem z datatables Angular 5 i Bootstrap 4, i mam wiele cols w tabeli. Rozwiązanie dla mnie było w TH
, aby dodać DIV
element o określonej szerokości. Na przykład dla cols "Nazwa osoby" i "data zdarzenia" potrzebuję określonej szerokości, a następnie umieścić div
w nagłówku col, cała szerokość col zmieni rozmiar na szerokość określoną z div na 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> ...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-05 03:08:41