使表格单元格方形

小编典典

使表格单元格方形

css

如何确保表格的每个单元格都应变成 正方形 而不使用固定大小？当他们改变宽度时要有所反应。

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>

阅读 276

2020-05-16

共1个答案

小编典典

您可以使用以下技术中描述的技术：响应正方形的网格。

适应您的带有表和 方形表单元格的 用例，它看起来像这样：

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>

2020-05-16