Dopasuj szerokość komórki do zawartości

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ę.

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;
}

Oprawa

max-width:100%;
white-space:nowrap;

rozwiąże twój problem.

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.

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.

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!

Prosty :

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>