如何使表格网格响应不使用flexx等

我有一个非常简单的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或网格…

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

我需要在%或vw值设置项目的宽度和高度吗?

定义表格宽度为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>

假设我没有误解问题，如果有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>

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>

相关内容

最新更新

热门标签：