Jak ustawić stałą szerokość kolumn tabeli?

Domyślnie szerokość kolumny w tabeli jest automatycznie dopasowywana tak, aby zmieścić umieszczoną w niej zawartość. Spójrzmy na poniższy przykład tabeli z trzema kolumnami, w której nie zdefiniowaliśmy szerokości ani tabeli, ani poszczególnych komórek.

<table border="1">
    <tr>
        <td>Tekst</td>
        <td>Długi tekst</td>
        <td>Strasznie długi tekst</td>
    </tr>
</table>

Jak widać powyżej zarówno komórki, jak i sama tabela przyjmują taką szerokość, aby zmieścić umieszczony w komórkach tekst. Definiując szerokość całej tabeli na 100% otrzymamy szerszą tabelę, ale kolumny nadal będą miały różną szerokość w zależności od ich zawartości.

<table border="1" style="width:100%;">
    <tr>
        <td>Tekst</td>
        <td>Długi tekst</td>
        <td>Strasznie długi tekst</td>
    </tr>
</table>

I tu dochodzimy do naszego tytułowego pytania. Co zrobić, by wszystkie kolumny miały jednakową szerokość? Można na przykład dla każdej komórki ustawić tę samą szerokość podawaną w pikselach, jeśli znamy szerokość tabeli lub w procentach jeśli tabela np. ma ustawione 100% szerokości tak jak w naszym przykładzie. Wtedy każda komórka powinna mieć 33% szerokości… ale zgubiliśmy gdzieś 1% i jeszcze są obramowania. No i będziemy mieli znów robotę, gdy zmieni się liczba kolumn. Na szczęście jest prostsze rozwiązanie.

Proste rozwiązanie na stałą szerokość kolumn.

Tak jak wspomniałem na początku, przeglądarka domyślnie dobiera szerokość kolumn w sposób automatyczny, czyli szerokość komórki zależy od jej zawartości. Możemy to automatyczne dopasowanie po prostu wyłączyć i wtedy zawartość komórek nie będzie wpływała na ich szerokość. Szerokość tabeli zostanie po równo rozdzielona między kolumny. Skorzystamy z selektora table-layout i ustawimy jego wartość na fixed, domyślnie ma auto. Spójrzmy na przykład.

<table border="1" style="width:100%;table-layout:fixed;">
    <tr>
        <td>Tekst</td>
        <td>Długi tekst</td>
        <td>Strasznie długi tekst</td>
    </tr>
</table>

Jak widać wszystkie kolumny mają jednakową szerokość. Oczywiście nadal możemy nadawać szerokość poszczególnym komórkom, wtedy pozostała dostępna szerokość zostanie podzielona po równo pomiędzy resztę kolumn.

<table border="1" style="width:100%;table-layout:fixed;">
    <tr>
        <td style="width:50%;">Tekst</td>
        <td>Długi tekst</td>
        <td>Strasznie długi tekst</td>
    </tr>
</table>

Kilka dodatkowych informacji

Przy niezdefiniowanym selektorze table-layout lub ustawionym na auto przeglądarka podczas renderowania tabeli najpierw oblicza minimalne i maksymalne szerokości kolumn, następnie odczytuje zawartość komórek, by ostatecznie rozplanować szerokości kolumn. Z racji, że musi się tak napracować trwa to nieco dłużej niż przy table-layout: fixed, gdzie szerokości kolumn są z góry ustalone. Warto o tym pamiętać, choć różnica w czasie przy niewielkich tabelach jest dla człowieka niezauważalna.

Szerokość konkretnej kolumny można zdefiniować korzystając z tagów <col>, ale powszechniejszym sposobem jest ustawienie szerokości komórki w danej kolumnie. Należy tylko pamiętać, że musi to być komórka w pierwszym wierszu tabeli. Jeśli ustawimy szerokość komórki w innym niż pierwszy wiersz tabeli to nie wpłynie to na szerokość kolumny. Widać to na poniższym przykładzie.

<table border="1" style="width:100%;table-layout:fixed;">
    <tr>
        <td>Tekst</td>
        <td>Długi tekst</td>
        <td>Strasznie długi tekst</td>
    </tr>
    <tr>
        <td style="width:50%;">Tekst 2</td>
        <td>Długi tekst 2</td>
        <td>Strasznie długi tekst 2</td>
    </tr>
</table>

Więcej o tagu <col> przeczytasz już wkrótce w artykule „Jak nadać styl całej kolumnie tabeli?”.