Machen Tabellenzellen quadratisch

How, um sicherzustellen, dass jede Zelle der Tabelle sollte sich Platz ohne die Verwendung von festen Größen? Und reaktionsschnell Weg, wenn Sie ändern die Breite.

CSS:

table {
  width: 90%;
}
td {
  width: 30%;
}
tr {
  /** what should go here? **/
}

HTML:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
<table>

InformationsquelleAutor Ganesh Bhosle | 2014-04-03
  1. 47

    Können Sie die Technik beschrieben in: Raster von responsive Quadrate.

    Abgestimmt auf Ihren Anwendungsfall, der mit einem Tisch und Platz Tabellenzellen, würde es so Aussehen:

    CSS:

    table {
  width: 90%;
}
td {
  width: 33.33%;
  position: relative;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}
td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: gold;
}

    HTML:

    <table>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
  </tr>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
  </tr>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
    <td><div class="content">1</div></td>
  </tr>
<table>

    FIDDLE demo

    • Das ist wirklich cool, "responsive" auch 🙂
    • Funktioniert, Danke!!
    • Konnte beide downvoters erklären, warum pls ich bin ok mit, dass, aber es ist nicht sehr konstruktiv, ohne Erklärung.
    • diese Lösung funktioniert nicht auf android <4.3 stock-Browser. Immer noch geil, obwohl 🙂
    • wie vertical-align:middle den Inhalt ?
    • es ist eine Technik beschrieben hier : stackoverflow.com/a/20457076/1811992 (siehe 3.Die Zentrierung der Inhalte). Sie können auch einen Blick auf dieses stackoverflow.com/questions/8865458/...
    • Vor dem ausrichten der text Erstens müssen Sie hinzufügen " width: 100%; height: 100%;" zu "td .content {...}" und nach richten Sie den text einfach

    InformationsquelleAutor web-tiki
  2. 5

    Hier ist mein code: http://jsfiddle.net/vRLBY/1/

    Den Schlüssel zu verwenden ist:

    td { width: 33%; padding-bottom: 33%; height: 0; }
td div { position: absolute }

    weil padding-bottom ist definiert in Bezug auf die Breite. Weitere Informationen: http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

    Hinweis: ich Vorher gepostet nicht funktionierende code (siehe hier). Vielen Dank an @web-tiki für die Meldung der Fehler 😉

    • gut, das hat eine ziemlich seltsame Wirkung in diesem fiddle : jsfiddle.net/webtiki/cM3yb
    • Für uns lief es in der Fiedel. Können Sie beschreiben, die weired Effekt, den Sie sehen?
    • für mich auch, fiddle sieht bisschen komisch..
    • Nie benutzt jFiddle vor, also ich nicht sagen kann, Wann es gut aussieht und wenn sich komisch an... 😉 ich würde empfehlen, dass Sie löschen müssen, die body { ... } von der CSS....
    • gut fiddle ist sehr handlich, können Sie es Bearbeiten und speichern es, um uns zu zeigen, Ihre Technik zu arbeiten. Es etwar ist wie eine Webseite, die jeder Bearbeiten kann, speichern und teilen...
    • hier ist es ohne body CSS : jsfiddle.net/webtiki/cM3yb/1
    • jsfiddle.net/vRLBY ohne body { ... }...
    • Ich habe gerade überprüft mit firefox und es ist besser, aber das tds nicht Platz. Ich werde einen screenshot machen, Sie zu zeigen.
    • Ich sehe das problem in der Zwischenzeit...

    InformationsquelleAutor Stephan Kulla
Schreibe einen Kommentar