HTML Praktyka szerokości kolumny tabeli

Question

Jakie są dobre praktyki przy wybieraniu szerokości kolumn w tabeli? Załóżmy, że mam cztery kolumny, nazwę (szerokość zmiennej), opis (długa treść tekstu), liczbę (maks. 3 znaki), datę (stały format).

Jaka byłaby dobra praktyka? Myślę o stałej szerokości dla descr., Count i width (w ten sposób w rzeczywistości również nazwa "fixed" width). Ale moim prawdziwym pytaniem jest, jak wybrać konkretny rozmiar. Na przykład, jeśli formatem daty jest rrrr-MM-dd, istnieje pewna sztuczka, aby przekonwertować te 10 znaków na szerokość, co zagwarantuje, że będzie się wyświetlać w dowolnej przeglądarce przy użyciu dowolnej czcionki i rozmiaru czcionki (bez podejmowania również nadmiernych ilości przestrzeń)?

edit: ze stałym mam na myśli coś podobnego do „ustalonej ilości pikseli w stosunku do Font szerokość”

Answer 1

można zadeklarować white-space: nowrap; na wszystkie komórki, które chcesz, aby rozciągnąć tyle, ile potrzeba, bez zajmowania dodatkowego miejsca (nazwa, data, liczba), a następnie po prostu podaj pozostałym komórkom szerokość 100%. W ten sposób komórka o 100% szerokości będzie się rozszerzać tak bardzo, jak to możliwe, bez powodowania zwijania się innych komórek na wielu liniach.

Answer 2

Jeśli chcesz zaoszczędzić sobie wiele znaczników ...

Po pierwsze, jeśli o stałej szerokości masz na myśli stały procent, należy dodać następujące wpisy do arkusza stylów:

.width1 { 
    width: 1%; 
} 
.width2 { 
    width: 2%; 
} 
.width99 { 
    width: 99%; 
} 
.width100 { 
    width: 100%; 
} 

To daje elastyczność, której potrzebujesz, jeśli chcesz zastosować dziwną szerokość procentową dla dowolnego z nich, jeśli chcesz - na przykład width23 na jednej z nich, szerokość 27 na drugiej.

Teraz to jest sprytnie. Używając tagu col, możesz zastosować szerokości tylko jeden raz zamiast na każdej komórce. Wiem, że możesz zastosować szerokości tylko do pierwszego wiersza i ustawiają szerokość dla tej samej komórki w każdym innym rzędzie - ale znacznik col może być używany do ustawiania innych właściwości. Na przykład:

<table class="width100"> 
    <col class="width15" style="background-color: #cccccc;" /> 
    <col class="width65" /> 
    <col class="width10" /> 
    <col class="width10" /> 
    <tr> 
     <td>My Sample Name</td> 
     <td>My Sample Long Description</td> 
     <td>5</td> 
     <td>2010-Oct-08</td> 
    </tr> 
</table> 

ja generalnie wolą używać tej techniki - ale jeśli jest to układ będę używał na wielu tabel (na przykład tabela klienci mogą mieć taki sam układ jak na stole agentów) wtedy będę utwórz klasę dla każdej kolumny i ustaw szerokość itp. w tej klasie. Następnie zastosuję odpowiednią klasę do każdej komórki. Przypuszczam, że obie metody mogłyby być łączone - odpowiednia klasa mogłaby być zastosowana do odpowiedniej zmiennej, ale fakt, że właściwości są ustawione w jednym miejscu (arkusz stylów) oznacza, że ​​trzeba to zmienić tylko raz.

Mam nadzieję, że to pomaga i że jest tym, czego szukasz.

Richard