Dopasuj szerokość komórki do zawartości


265

Biorąc pod uwagę następujący znacznik, jak mogę użyć CSS, aby wymusić dopasowanie jednej komórki (wszystkich komórek w kolumnie) do szerokości zawartej w niej zawartości zamiast rozciągania (co jest zachowaniem domyślnym)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

EDYCJA: Zdaję sobie sprawę, że mógłbym na stałe zakodować szerokość, ale wolałbym tego nie robić, ponieważ zawartość, która trafi do tej kolumny jest dynamiczna.

Patrząc na poniższy obrazek, pierwszy obraz jest tym, co tworzy znacznik. Drugi obraz jest tym, czego chcę.

wprowadź opis zdjęcia tutaj


Nie rozumiem twojego pytania. Czy chcesz ograniczyć ostatnią kolumnę do określonej szerokości?
MetalFrog

8
@diEcho Myślałem, że to dość jasne. Dodam zdjęcie lub dwa.
Mansfield

Odpowiedzi:


449

Nie jestem pewien, czy rozumiem twoje pytanie, ale spróbuję go dźgnąć. JSfiddle z przykładu .

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

3
dlaczego piszesz <table style="width:100%">zamiast<table width="100%" >
diEcho

17
@diEcho Nie napisałem tej części, która pochodziła z przykładowego kodu. Niezależnie od tego, złą praktyką jest stosowanie atrybutu width na elementach. W tym szybkim przykładzie wbudowany CSS jest w porządku, ale jeśli jest to kod na poziomie produkcyjnym, powinien zostać wyodrębniony do pliku.
MetalFrog

45
Lepszym sposobem na wykonanie tego IMO byłoby zdefiniowanie stylu o nazwie „nostretch” (lub coś takiego), a następnie po prostu zdefiniowanie nostretch w CSS, aby mieć szerokość: 1% i nowrap. Wtedy ostatni niszczyciel miałby „class =" nostretch block ””. W ten sposób możesz „nostretchować” dowolną komórkę.
Tim Holt,

3
To dobre rozwiązanie, ale niestety, w Bootstrap 3 moje grupy przycisków będą od tego wracać : jsfiddle.net/wexdX/326 Jakieś pomysły, jak to ukryć?
Martin Braun,

5
Działa to tylko wtedy, gdy zawartość jest szersza niż szerokość: 1% - prawda? Ponieważ jeśli zawartość jest mniejsza niż szerokość: 1%, komórka będzie większa.
Adam


8

Dla mnie jest to najlepszy autofit i autoresize dla tabeli i jej kolumn (użyj css! Ważne ... tylko jeśli nie możesz bez nich)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

Nie określaj szerokości css dla tabeli lub kolumn tabeli. Jeśli zawartość tabeli jest większa, zwiększy się rozmiar ekranu do.


3

Ustawienie szerokości CSS na 1% lub 100% elementu zgodnie ze wszystkimi specyfikacjami, które mogłem się dowiedzieć, jest powiązane z rodzicem. Chociaż Blink Rendering Engine (Chrome) i Gecko (Firefox) w chwili pisania wydają się dobrze radzić sobie z tym 1% lub 100% (zmniejsz kolumny lub kolumnę, aby wypełnić dostępne miejsce), nie jest to zagwarantowane zgodnie ze wszystkimi specyfikacjami CSS Mogę znaleźć, aby poprawnie to wyrenderować.

Jedną z opcji jest zastąpienie tabeli przez div div CSS4:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Działa to w nowych przeglądarkach tj. IE11 + patrz tabela na dole artykułu.


1

Istnieje wiele sposobów, aby to zrobić!

popraw mnie, jeśli się mylę, ale pytanie szuka tego rodzaju rezultatu.

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

Pierwsze 2 pola „współdzielą” pozostałą stronę (UWAGA: jeśli dodasz więcej tekstu do pól 50%, zajmie to więcej miejsca), a ostatnie pole będzie stale dominować w tabeli.

Jeśli chcesz zawijać tekst, możesz przenieść białe znaki : nowrap; styl 3. pola
będzie jedynym sposobem na rozpoczęcie nowej linii w tym polu.

alternatywnie możesz ustawić długość w ostatnim polu tj. szerokość: 150 pikseli i pozostaw wartości procentowe w pierwszych 2 polach.

Mam nadzieję że to pomoże!


-1

Prosty :

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>
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.