如何在不使用 flexbox 等的情况下使表格网格响应 [重复]
Posted
技术标签:
【中文标题】如何在不使用 flexbox 等的情况下使表格网格响应 [重复]【英文标题】：How to make table grid responsive without using flexbox etc [duplicate] 【发布时间】：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 值设置项目的宽度和高度？
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于如何在不使用 flexbox 等的情况下使表格网格响应 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何在不使用 setGridLinesVisible() 方法的情况下永久显示 GridPane 对象网格线？