CSS - stylowanie tabeli

0

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?

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1