web-dev-qa-db-ja.com

表のセルを正方形にする

テーブルの各セルが固定サイズを使用せずにsquareになるようにするにはどうすればよいですか？そして、幅を変更するときにresponsiveになります。

table {
  width: 90%;
}
td {
  width: 30%;
}
tr {
  /** what should go here? **/
}
<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>
csscss3responsive-designcss-shapesaspect-ratio
26
Ganesh Bhosle

応答性のある正方形のグリッド で説明されている手法を使用できます。

テーブルと正方形テーブルセルを使用してユースケースに適応すると、次のようになります。

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

48
web-tiki

ここに私のコードがあります： http://jsfiddle.net/vRLBY/1/

キーを使用することです：

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

なぜならpadding-bottomは幅に関して定義されます。詳細： http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

注：以前、機能しないコードを投稿しました（ here を参照）。バグを報告してくれた@ web-tikiに感謝します;-)

5
Stephan Kulla

固定のwidthプロパティ（パーセンテージでも）を必要としないソリューションを誰かが探している場合、上記の回答と承認済みの回答からの link に基づいて私が思いついたのは次のとおりです。

td {
    height: 0;

    &:after, &:before {
        content: '';

        display: block;
        padding-bottom: calc(50% - 0.5em);
    }
}

それはちょっと足の不自由ですが、それは1つの石で2羽の鳥を殺します：

  • トリックをします
  • コンテンツを垂直に揃えます
0
SOReader