如何在不使用 flexbox 等的情况下使表格网格响应 [重复]答案

【问题标题】：How to make table grid responsive without using flexbox etc [duplicate]如何在不使用 flexbox 等的情况下使表格网格响应 [重复]
【发布时间】：2021-11-10 22:41:21
【问题描述】：

我的 HTML 结构非常简单，如下所示：

<table>
    <tr>
        <td><div class="item"><div>0</div></div></td>
        <td><div class="item"><div>1</div></div></td>
        <td><div class="item"><div>2</div></div></td>
        <td><div class="item"><div>3</div></div></td>
        <td><div class="item"><div>4</div></div></td>
        <td><div class="item"><div>5</div></div></td>
        <td><div class="item"><div>6</div></div></td>
        <td><div class="item"><div>7</div></div></td>
        <td><div class="item"><div>8</div></div></td>
        <td><div class="item"><div>9</div></div></td>
        <td><div class="item"><div>10</div></div></td>
    </tr>
</table>

情况看起来像：我正在制作电子邮件模板，所以我不能使用任何 flexbox、grid 方法。我对旧样式的样式非常陌生:)。

我只想像display: flex 这样设置表格样式，但我又不能使用 flex 或 grid...

我希望项目在一行中，每个项目之间的间隔相同justify-content: space-around，而且它们应该是响应式的。

是否需要以 % 或 vw 值设置项目的宽度和高度？

【问题讨论】：

标签： html css html-table responsive-design

【解决方案1】：

将表格宽度定义为 100% 并将表格单元格中的文本居中对齐：

table {
  width: 100%;
}
td {
  text-align: center;
}

<table>
    <tr>
        <td><div class="item"><div>0</div></div></td>
        <td><div class="item"><div>1</div></div></td>
        <td><div class="item"><div>2</div></div></td>
        <td><div class="item"><div>3</div></div></td>
        <td><div class="item"><div>4</div></div></td>
        <td><div class="item"><div>5</div></div></td>
        <td><div class="item"><div>6</div></div></td>
        <td><div class="item"><div>7</div></div></td>
        <td><div class="item"><div>8</div></div></td>
        <td><div class="item"><div>9</div></div></td>
        <td><div class="item"><div>10</div></div></td>
    </tr>
</table>

【讨论】：

【解决方案2】：

假设我没有误解这些问题，如果有 10 个单元格，那么您可以为每个单元格分配 10% 的可用空间。

当然，如果你开始引入边距或内边距或边框，比例会有所不同，所以这只是最简单的情况。

<table style="width: 100%;">
    <tr style="width: 100%;">
        <td style="width: 10%;"><div class="item"><div>0</div></div></td>
        <td style="width: 10%;"><div class="item"><div>1</div></div></td>
        <td style="width: 10%;"><div class="item"><div>2</div></div></td>
        <td style="width: 10%;"><div class="item"><div>3</div></div></td>
        <td style="width: 10%;"><div class="item"><div>4</div></div></td>
        <td style="width: 10%;"><div class="item"><div>5</div></div></td>
        <td style="width: 10%;"><div class="item"><div>6</div></div></td>
        <td style="width: 10%;"><div class="item"><div>7</div></div></td>
        <td style="width: 10%;"><div class="item"><div>8</div></div></td>
        <td style="width: 10%;"><div class="item"><div>9</div></div></td>
        <td style="width: 10%;"><div class="item"><div>10</div></div></td>
    </tr>
</table>

【讨论】：

【解决方案3】：

It may also be possible that you can fix your issues with some CSS formating in the

表结构中的标题和一些标签。

    <head>
          <meta charset="utf-8" />
          <title></title>
          <style>
            .grid-container {
                display: grid;
                grid-row-gap: 2px;
                grid-template-columns: auto auto auto auto auto auto;
                background-color: #2196F3;
                padding: 5px;
            }
    
            .grid-item {
                background-color: rgba(255, 255, 255, 0.8);
                border: 1px solid rgba(0, 0, 0, 0.8);
                padding: 5px;
                font-size: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <body>
                // Class "buttons" references section in Header
            <div class="grid-container">
                <div class="grid-item"><button class="buttons"> 01</button></div>
            </div>
        </body>
    </html>

【讨论】：