【问题标题】:Make table cells square使表格单元格变成正方形
【发布时间】:2014-05-15 03:38:21
【问题描述】:

如何确保表格的每个单元格都变成方形而不使用固定尺寸?当它们改变宽度时,要响应

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>

【问题讨论】:

    标签: css responsive-design css-shapes aspect-ratio


    【解决方案1】:

    您可以使用Grid of responsive squares 中描述的技术。

    使用表格和方形表格单元格适应您的用例,它看起来像这样:

    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 demo

    【讨论】:

    • 两位反对者能否解释原因,我对此表示同意,但没有解释就不是很有建设性。
    • 此解决方案不适用于 android
    • 如何垂直对齐:内容居中?
    • @BradKent 这里描述了一种技术:stackoverflow.com/a/20457076/1811992(参见 3.Centering the content)。你也可以看看这个stackoverflow.com/questions/8865458/…
    • 在首先对齐文本之前,您必须添加“宽度:100%;高度:100%;”到“td .content {...}”,然后您可以简单地对齐文本
    【解决方案2】:

    这是我的代码: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 报告错误 ;-)

    【讨论】:

    • 嗯,这在这个小提琴中有一个非常奇怪的效果:jsfiddle.net/webtiki/cM3yb
    • @web-tiki:对我们来说,它在小提琴中运行良好。你能描述一下你看到的奇怪的效果吗?
    • 以前从未使用过 jFiddle,所以我不能说它什么时候看起来不错,什么时候很奇怪...... ;-) 我建议你必须从 CSS 中删除 body { ... }......
    • 小提琴非常好用,您可以对其进行编辑并保存以向我们展示您的技术。它基本上就像一个网页,每个人都可以编辑、保存和分享......
    • @tampis 我刚刚用 Firefox 检查过,它更好,但 tds 不是方形的。我会截屏给你看。
    【解决方案3】:

    如果有人正在寻找不需要固定 width 属性(即使是百分比)的解决方案,这就是我根据上述答案和已批准答案中的 link 得出的结论:

    td {
        height: 0;
    
        &:after, &:before {
            content: '';
    
            display: block;
            padding-bottom: calc(50% - 0.5em);
        }
    }
    

    有点蹩脚,但一石二鸟:

    • 成功了
    • 使内容垂直对齐

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-06-03
      • 1970-01-01
      • 1970-01-01
      • 2018-05-24
      • 2013-11-10
      • 1970-01-01
      • 2017-12-12
      • 2012-03-15
      相关资源
      最近更新 更多