Mam do ostylowania tabelę, w której będzie się znajdywać bardzo dużo informacji (ma suwak poziomy i pionowy), chcę, żeby szerokość kolumny nagłówka zgadzała się z szerokością danych w tabeli mimo tego, że np. napis w headerze kolumny będzie dużo dłuższy niż zawartość danej. Jak to zrobić bez przypisywania na sztywno szerokości kolumny?
0
2
W nagłówku ustawiasz zawijanie wierszy tekstu, a w komórkach z danymi nie.
2
Z Twojego opisu rozumiem, że chcesz zawijać tekst w nagłówkach kolumn. Jak to osiągniesz zależy od tego, jak konkretnie u Ciebie jest zdefiniowana tabela (rozumiem, że w HTML), ale być może to będzie dla Ciebie odpowiednie:
<div class="container">
<table>
<tr>
<th>Baaardzo długi nagłówek kolumny i jeszcze więcej nagłówka</th>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>Mniej-bardzo długa zawartość</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
</table>
</div>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
td {
white-space: nowrap;
}
.container {
width: 150px; /* jakaś szerokość */
height: 100px; /* jakaś wysokość */
overflow: scroll;
}
Działa to tak: https://jsfiddle.net/cgv9tsyz/38/
W razie wątpliwości: u mnie w Firefoksie 68 na Linuksie wyświetla się zarówno poziomy, jak i pionowy suwak.