W mojej tabeli ustawiłem szerokość pierwszej komórki w kolumnie na 100px
.
Jednakże, 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ć tę ekspansję?
Trochę się z nim pobawiłem, bo miałem problem, żeby go rozgryźć.
Musisz ustawić szerokość komórki (albo th
albo td
działało, ja ustawiłem oba) ORAZ ustawić table-layout
na fixed
. Z jakiegoś powodu, szerokość komórki wydaje się być stała tylko wtedy, gdy szerokość tabeli jest ustawiona (myślę, że to głupie, ale whatev).
Przydatne jest również ustawienie właściwości overflow
na hidden
, aby zapobiec pojawianiu się dodatkowego tekstu w tabeli.
Powinieneś upewnić się, że pozostawiasz wszystkie obramowania i rozmiary 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>
[Tutaj jest to w JSFiddle][1]
Ten facet miał podobny problem: https://stackoverflow.com/q/446624/534056
Musisz napisać to wewnątrz odpowiedniego CSS
table-layout:fixed;