Erstellen einer HTML-Tabelle-Spalte so klein wie möglich, aber nicht kleiner

Ich habe eine Spalte mit Bezeichnungen und entsprechenden Textfelder, nämlich:

<table>
  <tr>
  <td>Label:</td>
  <td><input type="text"></input></td>
  </tr>
  <tr>
  <td>longer label:</td>
  <td><input type="text"></input></td>
  etc...

Ich will, um sicherzustellen, dass die erste Spalte ist breit genug, damit der text in einer Zeile, aber nicht breiter als nötig, um maximale Speicherplatz für den Eingabe-Boxen (die Breite 100%). Also ich möchte nicht einen bestimmten Prozentsatz oder eine explizite Breite, nur etwas zu sagen: "so klein wie möglich, aber nicht kleiner."

Gibt es eine Möglichkeit, dies zu tun in reinen html/css oder muss ich greifen, um javascript?

(Natürlich, wenn die Seite ist sehr eng, dies ist nicht erreichbar, aber ich bin nicht besorgt über die sehr engen Browsern.)

Wenn Sie möchten, um die Etiketten in einer Zeile, gelten white-space:nowrap
Wenn die Tabelle gesetzt ist, wird die gewählte Antwort wird nicht die Spalte "so schmal, wie Sie brauchen, um zu bleiben in einer Linie".

InformationsquelleAutor Fred Thomas | 2011-07-12

  1. 1

    Stellen Sie sicher, dass Ihre Tabelle die Breite auf 100% als gut. Ein Eingang mit 100% Breite wird nur erweitern, um 100% des übergeordneten Elements. Da eine Tabelle ist natürlich nicht 100% breit (nur so breit wie sein Inhalt) können Sie am Ende mit seltsam große Eingänge.

    Persönlich würde ich es nur finden, eine Breite, die funktioniert und stick mit es für die label-Zellen. Vor allem, wenn Sie tun dies über mehrere Seiten, so dass es konsistent sind.

    Da bist du etwas ganz bestimmtes mit gängigen HTML-Elementen, würde ich empfehlen, indem Sie Ihnen eine CSS-Klasse zu vermeiden, brechen andere Dinge. Ihre Tabelle und CSS könnte wie folgt Aussehen:

    <style type="text/css">
    table.form{width:100%}
    td.label{width:150px;white-space:nowrap;}
    td input{width:100%;}
</style>

<table class="form">
    <tr>
        <td class="label">My label:</td>
        <td><input type="text" /></td>
    </tr>
</table>

    Nachteil ist, dass die table-basiertes layout ist wirklich schlecht zu gehen, aber die Arbeit mit dem, was ya wissen am besten und bekommt den job zu erledigen.

    FWIW, ich denke, das ist eine schreckliche Idee. Meine Seite hat zu arbeiten, auf mobile Browser und-Einstellung eine harte Nummer funktioniert einfach nicht bei allen gut. Ich habe auch nicht einverstanden mit Ihrer Abneigung gegen table-basiertes layout. Ich bin damit einverstanden, dass ein css-layout ist in der Regel vorzuziehen, ich denke, die Tabellen sind ziemlich gut zum auslegen von Formen.
    Wenn Sie sich für einen mobilen browser und mit so strengen Einschränkungen, sollten Sie versuchen, zu erwähnen, dass, und erhalten Sie möglicherweise eine Antwort, die besser geeignet für Sie.
    wenn Sie versuchen, erstellen eine ansprechende form, die sah nett aus auf eine mobile-browser, würden Sie nie verwenden Sie eine Tabelle, basierend layout.

    InformationsquelleAutor Joshua

Schreibe einen Kommentar