具有不同行高的 HTML 表格

Question

我想创建一个基于 HTML 表格的网格，布局如下。

---

| d | 乙| d |

| C | 一个 | C |

| d | 乙| d |

其中：
A：200x200
B：200x20
C：20x200
D：20x20

实现这一目标的最佳方法是什么。或者我应该使用其他一些元素（例如 div）来创建我自己的网格。

编辑
每个单元格都会有不同类型的内容。有些有下拉菜单，有些有带有几个按钮的输入，C 的内容垂直翻转（90 度）。以下是我正在测试的最新小提琴。

[https://jsfiddle.net/mjawaid/a3ody1wq/16/][1]

Answer 1

在 Web 文档中生成类似表格的网格布局有6 种可能的方法：

• 使用 HTML 表格的网格
• 使用 CSS 绝对定位的网格
• 使用 CSS 浮动的网格
• 使用 CSS2 表格的网格
• 使用 CSS3 Flexbox 的网格
• 使用 CSS3 网格的网格

使用 HTML 表格的网格

您可以将表格单元格的默认尺寸设置为20 x 20，然后再添加两个 CSS 声明来指示width需要的位置200和height需要的位置200。

工作示例：

td {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 8px;
text-align: center;
font-weight: bold;
border: 1px solid rgb(0, 0, 0);
}

tr:nth-of-type(1) td:nth-of-type(2),
tr:nth-of-type(3) td:nth-of-type(2) {
width: 200px
}

tr:nth-of-type(2) td {
height: 200px
}

tr:nth-of-type(2) td:nth-of-type(odd){
writing-mode: vertical-rl;
}

<table>
<tr>
<td>20x20</td>
<td>200x20</td>
<td>20x20</td>
</tr>

<tr>
<td>20x200</td>
<td>200x200</td>
<td>20x200</td>
</tr>

<tr>
<td>20x20</td>
<td>200x20</td>
<td>20x20</td>
</tr>
</table>

使用 CSS 绝对定位的网格

要仅使用 CSS（而不使用 CSS 表）复制类似表格的布局，您还可以将元素绝对定位在相对定位的父元素内。

工作示例：

div {
position: relative;
}

div > div {
position: absolute;
width: 20px;
height: 20px;
font-size: 8px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid rgb(0, 0, 0);
}

div > div:nth-of-type(n) {
top: 0;
}

div > div:nth-child(n+4) {
top: 23px;
height: 200px;
}

div > div:nth-of-type(n+7) {
top: 226px;
height: 20px;
}

div > div:nth-of-type(3n-2) {
left: 0;
}

div > div:nth-of-type(3n-1) {
left: 23px;
width: 200px;
}

div > div:nth-of-type(3n){
left: 226px;
}

div > div:nth-child(4),
div > div:nth-child(6) {
writing-mode: vertical-rl;
}

div > div:nth-child(5) {
line-height: 200px;
}

<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>

使用 CSS 浮动的网格

CSS 绝对定位（与绝对定位相比，需要更少的微调，因为您不需要给出每个元素的坐标）的替代方案是使用 CSS 浮动。

工作示例：

div {
display: block;
width: 252px;
height: 252px;
text-align: center;
font-size: 8px;
font-weight: bold;
}

div > div {
float: left;
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid rgb(0, 0, 0);
margin: 1px;
}

div:nth-of-type(3n-1) {
width: 200px;
}

div:nth-of-type(n+4):nth-of-type(-n+6) {
height: 200px;
}

div > div:nth-child(4),
div > div:nth-child(6) {
writing-mode: vertical-rl;
}

div:nth-of-type(5) {
line-height: 200px;
}

<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>

使用 CSS2 表格的网格

CSS2 表格经常被忽视，它通常可以成为 HTML 表格的更好替代品。

为什么？因为它们根本只显示为表格，因为display: table. 当您将响应式设计放在一起时，只要这些元素需要显示为 ablock或 aninline-block或其他任何内容，它们就可以不再是表格。

HTML 表格因不能很好地适应较小的屏幕尺寸而闻名。但是，正如您从下面的示例中看到的，CSS 表格可以很容易地将其自身（在 CSS 查询内@media）从表格转换为垂直列表或幻灯片或您想要的任何其他内容。

工作示例：

.table {
display: table;
font-size: 8px;
line-height: 20px;
text-align: center;
font-weight: bold;
border-spacing: 1px 1px;
}

.table > div {
display: row;
}

.table > div > div {
display: table-cell;
width: 20px;
height: 20px;
border: 1px solid rgb(0, 0, 0);
}

.table > div > div:nth-of-type(2) {
width: 200px;
}

.table > div:nth-of-type(2) > div {
height: 200px;
vertical-align: middle;
}

.table > div:nth-of-type(2) > div:nth-of-type(odd) {
writing-mode: vertical-rl;
}

<div class="table">

<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>

<div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
</div>

<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>

</div>

使用 CSS3 Flexbox 的网格

我们正在处理一个具有特定尺寸和坐标的明确定义的网格，因此 Flexbox 可能不是正确的方法。

也就是说，Flexbox 是 CSS Floats 的复杂的下一代继承者。因此，就像您可以使用浮动创建类似表格的网格布局一样，您也可以使用CSS3 Flexbox来创建。

div {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
width: 252px;
height: 252px;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}

div > div {
width: 20px;
height: 20px;
margin: 1px;
border: 1px solid rgb(0, 0, 0);
}

div > div:nth-of-type(3n-1) {
flex: 0 0 200px;
}

div > div:nth-of-type(n+4) {
height: 200px;
}

div > div:nth-of-type(n+7) {
height: 20px;
}

div > div:nth-of-type(4),
div > div:nth-of-type(6) {
writing-mode: vertical-rl;
}

<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>

使用 CSS3 网格的网格

最后......我们一直在等待的 - CSS3 网格。

工作示例：

div {
display: grid;
grid-template-columns: 20px 200px 20px;
grid-template-rows: 20px 200px 20px;
grid-gap: 2px;
font-size: 8px;
font-weight: bold;
}

div > div {
display: block;
border: 1px solid rgb(0, 0, 0);
text-align: center;
line-height: 20px;
}

div > div:nth-of-type(4),
div > div:nth-of-type(6) {
writing-mode: vertical-rl;
}

div > div:nth-of-type(5){
line-height: 200px;
}

<div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
<div>20x200</div>
<div>200x200</div>
<div>20x200</div>
<div>20x20</div>
<div>200x20</div>
<div>20x20</div>
</div>