Responsive Tabelle mit gleicher Breite und Höhe TDs

Wie erstelle ich eine responsive HTML-Tabelle, die jede Zelle/TD hat die gleiche Breite und Höhe? Also, wenn ich die Größe des browser-Fensters oder die Größe der Tabelle im container in der Tabelle wird die Größe, aber jede Zelle haben gleiche Höhe und Breite.

Stiftung nicht kümmern. Wenn ich initialisieren der TD mit fester Breite und Höhe in Pixel, bei der Größe, die Breite des Browsers, es schrumpft die td horizontal, aber nicht immer das gleiche Seitenverhältnis.

Ich bin mit Foundation, da meine meine Basis-responsive-framework.

InformationsquelleAutor Idan Shechter | 2015-06-10
  1. 7

    Unten ist ein Weg, es zu tun, das wird funktionieren .

    https://jsfiddle.net/ocp36uLb/32/

    table {
    border-collapse: collapse;
    width: 100%;
}
td {
    width: 50%;
    padding-bottom: 50%;
    display: inline-block;
}

    Durch die Einstellung der Polsterung ist die gleiche wie die Breite erstellen wir ein Quadrat, das behält er das Seitenverhältnis auf Größe ändern. Wir müssen Sie auch nutzen display: inline-block; um die Standardeinstellung zu überschreiben display: table-cell; die machen eine Zelle zu erweitern, um es zu passen, ist die Muttergesellschaft der Tabelle. border-collapse: collapse; ist auch wichtig, da es überschreibt die verbundene Tabelle border-rendering.

    Aber diese Methode kann gut sein, ein pixel aus, bei einigen Größen durch die Möglichkeit Tabellen zu machen. Es funktioniert perfekt für divs (was könnte man stattdessen verwenden, ich vermute) - auch ohne die border-collapse-definition.

    Andere Weise, die perfekt funktionieren wird für Tabellen ist zu verwenden Sie vw Einheiten. Ein bisschen komplexer als Sie es der Größe des Ansichtsfensters, so müssen Sie berücksichtigen, welcher Anteil der viewport Ihre Gesamtgröße der Tabelle ist. 1vw 1% der viewport. Sie werden sehen, aus dem link, dass es perfekt ist.

    table {
    width: 100%;
    border-collapse: collapse;
}
td {
    height: 15vw;
    width: 15vw;
    display: inline-block;
}

    vw-Einheiten sind nicht so gut unterstützt noch (alte IEs, einige mobile Browser), so wäre es wohl Wert, mit einem fallback.

    • was ist, wenn Sie mehr als zwei Zellen, zum Beispiel 8 Zellen. Ich habe mit 12,5% für die Breite und padding-bottom, aber wenn ich in der Größe verändert die Breite und Höhe nicht gleich sind.
    • href="https://jsfiddle.net/ocp36uLb/2/" >jsfiddle.net/ocp36uLb/2 - hast du auch hinzufügen, acht Zellen jeder Zeile?
    • ja, 8x8. Diese jsfiddle.net/ocp36uLb/4 Erträge 35x37 pixel TDs, wenn ich die Größe
    • sieht aus wie eine Marotte von Tabellen (lustige Dinge) diese divs Verhalten: jsfiddle.net/ocp36uLb/13 - ein reset kann erforderlich werden, oder einige offset der Breite und Polsterung, ich werde in diese in Kürze Bearbeiten und meine Antwort
    • off-the-record gibt es eine option, um die Zellen-Größe immer die gleiche Höhe und Breite, wenn text Hinzugefügt. Wenn ich das hinzufügen von text oder anderen Inhalten erweitert es die Zelle der Höhe.
    InformationsquelleAutor Toni Leigh
  2. 0

    Die gut funktioniert, wenn Sie haben keine Inhalte in der <td>. Aber mit einigen Inhalten der Polsterung ist extra auf die Höhe des Inhalts. siehe Beispiel unten:

    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; border-collapse: collapse;">
  <tbody>
    <tr>
      <td style="width: 100%; padding-bottom: 100%; background-color: #896464">Lorem ipsum dolor sit amet.</td>
    </tr>
    <tr>
      <td style="width: 100%; padding-bottom: 100%; background-color: #20A034">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</td>
    </tr>
  </tbody>
</table>
    InformationsquelleAutor Richard Atkinson
Schreibe einen Kommentar