Tabelle-Spalte-Breite so schmal wie die enthaltenen Daten?

Habe ich drei Spalten. Die letzten beiden möchte ich so schmal wie die in Ihnen enthaltenen Daten und der ersten Spalte können Sie den rest der Breite (die Tabelle hat 100% Breite).

Wie kann man das machen mit CSS? Jetzt die Spalten auf der rechten albern Aussehen mit extra viel Platz. Ideen?

InformationsquelleAutor Matthew | 2010-04-23
  1. 12

    Geben nur die erste Spalte ein width von 100% und, wenn notwendig, um die Zellen in allen anderen Spalten ein white-space: nowrap zu vermeiden, dass die Inhalte verpackt (wieder, nur, wenn nötig).

    E. g.

    <table>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
</table>

    mit

    table { width: 100%; }
table td.first { width: 100%; }

    Oder die moderne Art, die, wenn Sie nicht die Mühe über IE6-Benutzer:

    table { width: 100%; }
table td:first-child { width: 100%; }

    (so dass Sie können entfernen class="first")

    • Das werde es tun. Dank einer Tonne.
    InformationsquelleAutor BalusC
  2. 1

    ich beantwortete dies mit einem etwas anderen Ansatz mit diese mehr detailsed Antwort auf eine ähnliche Frage, im Grunde:

    Fügen Sie die Klasse shrink zu Spalten, die Sie wollen, zu haben, so schmal wie möglich

    <table>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>

    Mit diesem css:

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

    Mit dieser können Sie definieren, in mehreren Spalten haben eine minimale Breite auf einer Linie, sondern die andere, die Breite bleibt dynamisch (einschließlich mögliche Zeilenumbrüche).

    Beispiel-Snippet

    CSS:

    table {
  width: 100%;
}

td {
  padding: 10px;
}

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

    HTML:

    <table>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>

    InformationsquelleAutor Markus
Schreibe einen Kommentar