Ustawia stałą szerokość kolumny tabeli niezależnie od ilości tekstu w jej komórkach?
W tabeli ustawiłem szerokość pierwszej komórki w kolumnie na 100px
.
Jednak gdy tekst w jednej z komórek w tej kolumnie jest zbyt długi, szerokość kolumny staje się większa niż 100px
. Jak Mogę wyłączyć to rozszerzenie?
16 answers
Pobawiłem się nim przez chwilę, ponieważ miałem problem z rozpracowaniem tego.
Musisz ustawić szerokość komórki (albo th
albo td
, ja ustawiłem oba) i ustawić table-layout
do fixed
. Z jakiegoś powodu, szerokość komórki wydaje się pozostać stała tylko wtedy, gdy szerokość tabeli jest ustawiona, zbyt (myślę, że to głupie, ale co tam).
Warto również ustawić właściwość overflow
na hidden
, aby zapobiec wydostawaniu się dodatkowego tekstu z tabeli.
Należy upewnić się, aby zostawić wszystkie obramowanie i rozmiar również dla CSS.
Ok więc oto co mam:
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 100px;
overflow: hidden;
}
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
Ten facet miał podobny problem: szerokość komórki tabeli-ustalanie szerokości, owijanie / obcinanie długich słó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
2020-05-03 17:33:02
Zobacz: http://www.html5-tutorials.org/tables/changing-column-width/
Po znaczniku table użyj elementu col. nie potrzebujesz metki zamykającej.
Na przykład, jeśli masz trzy kolumny:
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</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
2014-03-06 16:01:10
Po prostu dodaj <div>
tag wewnątrz <td>
lub <th>
zdefiniuj szerokość wewnątrz <div>
.
To ci pomoże. Nic więcej nie działa.
Np.
<td><div style="width: 50px" >...............</div></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
2012-05-06 22:25:09
Jeśli potrzebujesz jednej lub więcej kolumn o stałej szerokości, podczas gdy inne kolumny powinny zmienić rozmiar, spróbuj ustawić zarówno min-width
, jak i max-width
na tę samą wartość.
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
2012-09-06 12:28:07
Musisz to napisać wewnątrz odpowiedniego CSS
table-layout:fixed;
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-08-13 13:10:35
To co robię to:
-
Ustaw szerokość td:
<td width="200" height="50"><!--blaBlaBla Contents here--></td>
-
Ustaw szerokość td za pomocą CSS:
<td style="width:200px; height:50px;">
-
Ustaw ponownie szerokość jako max i min za pomocą CSS:
<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
.td_size {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
}
Wtedy:
<td class="td_size">
Umieść atrybut class na dowolnym <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-08-13 13:09:38
Jeśli nie chcesz mieć stałego układu, określ klasę dla kolumny odpowiednio.
CSS:
.special_column { width: 120px; }
HTML:
<td class="special_column">...</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
2012-03-24 04:21:04
Użyłem tego
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
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-09-08 21:01:06
Spraw, aby zaakceptowana odpowiedź odpowiadała na małe ekrany, gdy są mniejsze niż Stała szerokość.
HTML:
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
CSS
table{
border: 1px solid black;
table-layout: fixed;
max-width: 600px;
width: 100%;
}
th, td {
border: 1px solid black;
overflow: hidden;
max-width: 300px;
width: 100%;
}
Js Fiddle
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-06-03 14:48:57
Pomaga również, aby umieścić w ostatniej "filler cell", z width: auto . To zajmie pozostałą przestrzeń i pozostawi wszystkie inne wymiary zgodnie z podanymi.
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-05-04 08:19:49
Ustawienie tego:
style="min-width:100px;"
Zadziałało dla mnie.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
2019-05-30 09:08:57
KAsun ma dobry pomysł. Oto prawidłowy kod...
<style type="text/css">
th.first-col > div,
td.first-col > div {
overflow:hidden;
white-space:nowrap;
width:100px
}
</style>
<table>
<thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
<tbody><tr><td class="first-col"><div>really long text</div></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
2012-07-11 00:35:14
Zgodnie z moją odpowiedzią tutaj , możliwe jest również użycie głowicy tabeli (która może być pusta) i zastosowanie względnych szerokości dla każdej komórki głowicy tabeli. Szerokość wszystkich komórek w korpusie tabeli będzie zgodna z szerokością ich głowicy kolumny. Przykład:
HTML
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="70%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
table {
width: 600px;
border-collapse: collapse;
}
td {
border: 1px solid #999999;
}
Alternatywnie, użyj colgroup
, jak sugerowano w odpowiedzi Hyathina.
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-11-02 14:52:28
Używam elementu:: after w komórce, gdzie chcę ustawić minimalną szerokość niezależnie od obecnego tekstu, tak:
.cell::after {
content: "";
width: 20px;
display: block;
}
Nie muszę ustawiać szerokości na rodzicu tabeli ani używać table-layout.
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
2019-12-16 08:52:38
Znalazłem odpowiedź Kasuna działa lepiej używając vwzamiast px Jak tak:
<td><div style="width: 10vw" >...............</div></td>
To była jedyna stylizacja, której potrzebowałem, aby dostosować szerokość kolumny
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-09-19 00:54:50
Nie musisz ustawiać "fixed"
- wystarczy ustawić overflow:hidden
, ponieważ szerokość kolumny jest ustawiona.
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-09-09 09:07:40