Wątek przeniesiony 2019-09-11 16:53 z przez cerrato.

CSS - stylowanie tabeli

Odpowiedz Nowy wątek
2019-09-11 16:51
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?

Pozostało 580 znaków

2019-09-11 17:14
2

W nagłówku ustawiasz zawijanie wierszy tekstu, a w komórkach z danymi nie.


Pozostało 580 znaków

2019-09-11 17:40
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.


edytowany 5x, ostatnio: Silv, 2019-09-11 17:41

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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