Jak zrobić kolumna tabela być minimalna szerokość

Question

Tutaj jest plik danych szablonu: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

Próbuję zrobić 8 z 10 kolumn w tabeli tylko zajmują dokładnie minimalnej szerokości że muszą na podstawie tekstu z poszanowaniem dopełnienia i nagłówków kolumn.

Na obrazie przykładowym chcę, aby wszystkie oprócz czwartej i dziewiątej kolumny zajmowały minimalną szerokość. Technicznie, istnieje 9 nagłówków kolumn, a ostatni ma colspan równy 2. Ostatni nagłówek to span3. Chciałbym, aby kolumna procentowa zajęła najmniejszą wymaganą szerokość, i niech pasek postępu lub przyciski przejścia/widoku/błędu zajmą resztę.

Kolumna 4 została skonfigurowana w celu zastąpienia przepełnionego tekstu wielokropkiem.

Przykład obrazu:

Answer 1

Jest trik, który polega na ustawieniu niektóre komórki do bardzo małej szerokości, a następnie nakładanie white-space: nowrap właściwość:

<table> 
    <tr> 
     <td class="min">id</td> 
     <td class="min">tiny</td> 
     <td>Fills space</td> 
     <td>Fills space</td> 
     <td class="min">123</td> 
     <td class="min">small</td> 
     <td>Fills space, wider</td> 
     <td>Fills space</td> 
     <td class="min">thin</td> 
    </tr> 
</table> 

td { 
    width: auto; 
} 

td.min { 
    width: 1%; 
    white-space: nowrap; 
} 

Live demo

Jak widać również w powyższym skrzypcach, nowrap wymusza na komórce tabeli zapobieganie przerwom linii, a tym samym wyrównanie jej szerokości do najmniejszej możliwej.

---

UPDATE:

Aby automatycznie zwinąć dłuższą kolumnę do elips The text-overflow: ellipsis jest to, czego prawdopodobnie szukasz:

td.cell-collapse { 
    max-width: 200px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Live demo

Wymaga to również overflow ustawiona na hidden, a także width lub max-width o ustalonej wartości. Dodaj klasę cell-collapse do komórek, których szerokość chcesz ograniczyć.

---

Poprzednie rozwiązanie Javascript zasada usunięta, ponieważ czysta podejście oparte na CSS teraz działa konsekwentnie we wszystkich nowoczesnych przeglądarkach. Oryginalny kod jest nadal dostępny na połączonym JSfiddle, skomentował.

Answer 2

Jeśli znasz rozmiary, które mają swoje kolumny i są one ustalone, sugeruję używanie stałego układu tabeli. To pozwala określić ustalony% każdej kolumny bierze.

Oto link, który pomógł mi w podobnej sytuacji http://css-tricks.com/fixing-tables-long-strings/