在表单元素周围绘制块并使用 CSS 伪元素添加标题

Question

我有以下 html 是由网络框架生成的，所以我无法更改它。但是我可以添加我自己的 CSS。

<table border="0" class="formlayout" role="presentation">
   <tbody>
      <tr>
         <td align="right">Medical Aid Plan</td>
         <td align="left"><input type="text"></td>
      </tr>
      <tr>
         <td align="right">Adult Medical Aid Dependants</td>
         <td align="left"><input type="text"></td>
         <td align="right">Child Medical Aid Dependants</td>
         <td align="left"><input type="text"></td>
      </tr>
      <tr>
         <td align="right">Total Package</td>
         <td align="left"><input type="text"></td>
      </tr>
      <tr>
         <td align="right">Pensionable Earnings</td>
         <td align="left"><input type="text"></td>
         <td align="right">Pensionable Earnings Percentage</td>
         <td align="left"><input type="text"></td>
      </tr>
      <tr>
         <td align="right">Voluntary Contributions</td>
         <td align="left"><input type="text"></td>
         <td align="right">Voluntary Contributions Percentage</td>
         <td align="left"><input type="text"></td>
      </tr>
   </tbody>
</table>

我想在表单中创建部分并围绕这些部分绘制块，并附上文本部分标题。为了实现这一点，我正在考虑在 table 行之间添加额外的 space，然后为文本和部分框架添加 CSS 伪元素。如何做到这一点？

我想将前 3 个文本输入添加到第 1 节，其余的添加到第 2 节。

我正在努力实现这样的目标：

Answer 1

可以做到。但它只适用于固定宽度的布局（除非你使用媒体查询）而且我不知道浏览器的兼容性。设置一些填充和背景图像会更容易。

这是一个 jsfiddle：http://jsfiddle.net/L7y5rz9j/

table.formlayout {
  width: 730px;
}
table.formlayout td {
  position: relative;
  z-index: 2;
}
table.formlayout tr:nth-child(1) td {
  padding-top: 1em;
}
table.formlayout tr:nth-child(3) td {
  padding-top: 3em;
}
table.formlayout tr:nth-child(1):after, table.formlayout tr:nth-child(3):after {
  content:"";
  position: absolute;
  left: 0;
  width: 750px;
  border: 1px solid;
}
table.formlayout tr:nth-child(1):after {
  height: 5em;
}
table.formlayout tr:nth-child(3):after {
  height: 6em;
  margin-top: 2em;
}
table.formlayout tr:first-child td:first-child:after, table.formlayout tr:nth-child(3) td:first-child:after {
  position: absolute;
  z-index: 1;
  width: 3em;
  padding: 2px 5px;       
  margin-left: 7em;
  background: white;
}
table.formlayout tr:first-child td:first-child:after {
  content:"Step 1";
  top: -9px;
}
table.formlayout tr:nth-child(3) td:first-child:after {
  content:"Step 2";
  top: 23px;
}

在表单元素周围绘制块并使用 CSS 伪元素添加标题

Draw blocks around form elements and add headings using CSS pseudo elements

css

pseudo-element