Jak ustawić minimalne szerokości komórek tabeli z wyjątkiem ostatniej kolumny?


106

Mam stół o 100% szerokości. Jeśli wstawię do niego <td>s, zostaną one rozłożone na równej długości kolumny. Jednak chcę, aby wszystkie kolumny z wyjątkiem ostatniej miały jak najmniejszą szerokość, bez zawijania tekstu.

Najpierw ustawiłem width="1px"wszystkie <td>s z wyjątkiem ostatniego (chociaż przestarzałe, ale style="width:1px"nie miało żadnego efektu), co działało dobrze, dopóki nie miałem danych wielowyrazowych w kolumnie. W takim przypadku, aby zachować jak najmniejszą długość, zawijał mój tekst.

Pokażę. Wyobraź sobie ten stół:

---------------------------------------------------------------------------------
element1 | data      | junk here   | last column
---------------------------------------------------------------------------------
elem     | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more     | of        | these       | rows
---------------------------------------------------------------------------------

Bez względu na to, co próbuję, wciąż otrzymuję to:

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

lub (mimo że ustawiłem style="whitespace-wrap:nowrap") to:

---------------------------------------------------------------------------------
         |      | junk  | last
element1 | data |       | 
         |      | here  | column
---------------------------------------------------------------------------------
         | more | other | again,
elem     |      |       | last
         | data | stuff | column
---------------------------------------------------------------------------------
more     | of   | these | rows
---------------------------------------------------------------------------------

Chcę dostać tabelę, którą przedstawiłem jako pierwszy. Jak to osiągnąć? (Wolałbym trzymać się standardu i używać CSS. Szczerze mówiąc, nie obchodzi mnie, czy IE również nie zaimplementował części standardu)

Więcej wyjaśnień: Potrzebuję, aby kolumny były jak najkrótsze bez zawijania słów (ostatnia kolumna powinna być tak duża, jak to konieczne, aby szerokość tabeli faktycznie osiągnęła 100%). Jeśli znasz LaTeX, chciałbym, aby tabele wyglądały naturalnie w LaTeX, gdy ustawisz ich szerokość na 100%.

Uwaga: znalazłem to, ale nadal daje mi to samo, co ostatnia tabela.


Najwyraźniej tak! Żenujące też, biorąc pod uwagę, że właśnie źle odczytałem pole css.
Shahbaz

Odpowiedzi:


54

whitespace-wrap: nowrapnie jest prawidłowym css. To white-space: nowrap, czego szukasz.


97

Działa to przynajmniej w Google Chrome. ( jsFiddle )

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap
}

table td.expand {
  width: 99%
}
<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">elem</td>
    <td class="shrink">more data</td>
    <td class="shrink">other stuff</td>
    <td class="expand">again, last column</td>
  </tr>
  <tr>
    <td class="shrink">more</td>
    <td class="shrink">of </td>
    <td class="shrink">these</td>
    <td class="expand">rows</td>
  </tr>
</table>


7
Zrobiłem też mój dzień :) <3
Kaan Soral

10
Musiałem odwrócić widthpodejście do moich potrzeb, ponieważ mam wiele szerokich kolumn (zamiast jednej szerokiej kolumny, ponieważ powyższe rozwiązanie działa lepiej). Usunąłem width: 99%z expandi dodawane width: 1%do shrinki rozwiązanie to działa dobrze dla mnie!
Campbeln

2
Śliczny! Jeśli chcesz, aby ta sama kolumna została rozwinięta, zamiast oznaczać wszystko klasą, zrobiłem tak: td:nth-child(1), td:nth-child(2){white-space:nowrap;} td:nth-child(3){width: 99%;}- Na wypadek gdyby wpadli nowicjusze. :)
ElizaWy

@ElizaWy W tę odpowiedź ( stackoverflow.com/questions/9623601/... ) I stworzył jQuery skrypt, który pozwala ci skopiuj col's classwartości atrybutów do odpowiedniej tabeli tds
yunzen

36
td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

Używając powyższego kodu, ostatnia komórka tabeli będzie starała się być tak duża, jak to tylko możliwe, a Ty zapobiegniesz zawijaniu się komórek poprzedzających. Robi to samo, co inne udzielone odpowiedzi, ale jest o wiele bardziej wydajne.


Uwielbiam prostotę.
juanmirocks

3
FYI, przynajmniej w IE11 (tryb krawędzi), trzeba dodać width: 1px;do nieostatniego stylu potomnego, aby nie ostatnie kolumny były renderowane z minimalną szerokością.
ewh

Najczystsze rozwiązanie na tej stronie! 👍
BoD

13

Trochę inny temat, ale może pomoże komuś, kto tak jak ja natknie się na to pytanie.
(Właśnie zobaczyłem komentarz Campbelna, który dokładnie to sugeruje po napisaniu mojej odpowiedzi poniżej, więc jest to w zasadzie szczegółowe wyjaśnienie jego komentarza)

Miałem problem na odwrót: chciałem ustawić jedną kolumnę tabeli na minimalną możliwą szerokość bez dzielenia jej na białe znaki (ostatnia kolumna w poniższym przykładzie), ale szerokość drugiej powinna być dynamiczna (łącznie z podziałami linii):

-----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

Proste rozwiązanie:

HTML

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

CSS

td.shrink {
  white-space: nowrap;
  width: 1px;
}

Kolumny z klasą shrinkrozszerzają się tylko do minimalnej szerokości, ale inne pozostają dynamiczne. To działa, ponieważ widthz tdautomatycznie rozszerzony, aby dopasować całą zawartość.

Przykładowy fragment


3

Możesz ustawić stałą szerokość, umieszczając divtag wewnątrztd

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}
<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/


1

Jeśli potrzebujesz wielu wierszy tekstu w komórce tabeli.

Nie white-space: nowrapużywaj white-space: pre;zamiast tego.

W komórce tabeli unikaj wszelkich formatów kodu, takich jak nowe linie i wcięcia (spacje) i użyj, <br>aby ustawić nową linię / wiersz tekstu. Lubię to:

<td>element1<br><strong>second row</strong></td>

Demo na CodePen


0

Kombinacja albo white-space: nowrapalbo white-space: preze min-width: <size>będzie wykonać zadanie. width: <size>samo w sobie nie wystarczy, aby utrzymać stół przed ściśnięciem.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.