Question

我尝试使用CSS display: table/table-row/table-cell属性重现一个表。但是，似乎这样创建的表中包含的<form>元素会使表格混乱。结构体。对齐将关闭，包含表单的整行将限制为前一个＆＃39;的宽度。排第一个细胞等等。它到处都是。

在这种情况下，是否可以使表单的行为与其他元素一样？我在CSS中将表单定义为display: inline，但这并没有帮助。

我的代码（为便于阅读而简化）

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

<强>更新

根据OP的要求，

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

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

<强>解

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

请参阅更新的代码段。

<form>

.calendarRow

第2排和第3排各有2个细胞，第1排有3个细胞。

如果我们要将无效的HTML应用于<table>，<tr>和<td>，那么它们也会执行不正常的操作。在这个片段我有：

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

<强>段

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

表格中的表格用css＆＃34; display：table＆＃34;属性

1 个答案: