使用 css "display: table"属性复制的表中的表单

Question

我正在尝试使用CSSdisplay: table/table-row/table-cell属性重现一个表。但是，似乎以这种方式创建的表中包含的<form>元素会弄乱表的结构。对齐将关闭，包含表单的完整行将限制为前一行第一个单元格的宽度，等等。它到处都是。

在这种情况下，是否可以使表单的行为像其他元素一样？我将表单定义为CSS中的display: inline，但这无济于事。

我的代码(为了可读性而简化了它)

form {
display: inline;
}
.calendarTable {
display: table;
margin: auto;
width: 60%;
}
.calendarRow {
display: table-row;
}
.calendarCell {
display: table-cell;
text-align: left;
padding: 10px;
vertical-align: middle;
}

<div class="main">
<div class="calendarTable">
<div class="calendarRow">
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
</div>
<?php some php loop ?>
<form method="post">
<div class="calendarRow">
<p class="calendarCell">
<some inputs>
</p>
<p class="calendarCell">
<some inputs with formaction>
</p>
</div>
<br>
</form>
<?php end php loop; ?>
<form method="post">
<div class="calendarRow">
<p class="calendarCell">
<some inputs>
</p>
<p class="calendarCell">
<some inputs with formaction>
</p>
</div>
</form>
</div>
</div>

Answer 1

更新

根据OP的要求，

我想知道在这种情况下是否有可能让表单正常运行。

确实有可能，我不确定它是否有效，但它完美无缺。

溶液

分配每个<form>display:table-row

请参阅更新的代码段。

---

1. .calendarRow周围缠绕着<form>

第 2 行

2. 和第 3 行各只有 2 个单元格，而第 1 行有 3 个单元格。

如果我们要将无效的HTML应用于<table>、<tr>和<td>，那么它们也会表现得不规则。在这个片段中，我有：

1. 已删除<forms>
2. 在第 2 行和第 3 行添加了 1 个单元格
3. 添加了table-layout:fixed以进一步控制表的行为。请注意，我已声明每个单元格的宽度为 32%。通常，这很难实现，因为第 3 列的内容比其他列多。
4. 添加了轮廓以演示单元格如何正确对齐。

片段

.calendarTable {
display: table;
margin: auto;
width: 60%;
table-layout: fixed;
}
.calendarRow {
display: table-row;
}
.calendarCell {
display: table-cell;
text-align: left;
padding: 10px;
vertical-align: middle;
width: 32%;
}
p {
outline: 1px solid black;
}
.red {
color: red;
font-weight: 700
}

<div class="main">
<div class="calendarTable">
<form class="calendarRow">
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
<p class="calendarCell">Some title</p>
</form>
<form class="calendarRow">
<p class="calendarCell">Some new title</p>
<p class="calendarCell">Some new title</p>
<p class="calendarCell red">This cell was missing</p>
</form>
<form class="calendarRow">
<p class="calendarCell">Some new title</p>
<p class="calendarCell">Some new title</p>
<p class="calendarCell red">This cell was missing</p>
</form>
</div>
</div>