html - 如何使用 css 和 html 创建申请表行

Question

嗨， friend 们，我正在尝试使用 html 和 css 创建一个应用程序表单行，它应该如下图所示。 因为我将把它包装成 pdf 格式，所以是否有必要将所有内容都放在表格中？谁能帮帮我吗？如何创建像 belwo 图像一样的精确应用程序行。 这是我尝试过的[demo][1]

这是我更新后的代码，但我认为绝对位置在 pdf 中不起作用，所以请 html 给我以 pdf 格式获取。

<table>
            <tr>
               <h3 style="position:relative">Signed at_________, this __________</h3>
               <span style="position: absolute;top: 40px;left: 110px;font-weight: bold;">ville</span>
                <span style="    position: absolute;top: 40px;left: 240px;font-weight: bold;">date</span>
            </tr>

        </table>

她是Fiddle to try

Answer 1

所有表格文本都需要在 <td> 中标签。我会在表中添加一个类来控制字体大小和粗体，以防止使用 <h3>无处不在。

table {
  font-weight: bold;
  border-collapse: collapse;
 }

.row-form {
  background-color: #ffff00; 
}

.row-description {
  text-align: center;
}

<table>
  <tr class="row-form">
    <td>Signed at</td>
    <td>________________</td>
    <td>, this&nbsp</td>
    <td>________________</td>
  </tr>
  <tr class="row-description">
    <td></td>
    <td>ville</td>
    <td></td>
    <td>date</td>
  </tr>
</table>