html - 在表格中对齐的问题

Question

我有一张 8 的桌子<td>。所有项目都从 PHP 数组中填充。示例行如下所示：

(row number) (Two Chinese characters) (1-5 characters) (input box 1) (1-5 characters) (input box 2) (1-5 characters) (submit button)

目前所有八个<td>垂直对齐，但我想让 td 项目 6（输入框 2）和 7（1-4 个字符）在输入框 1 旁边对齐，因此之间没有空格

为了更清楚地说明这一点，请考虑这两行的显示方式。

1.  喘氣  a ____ bc    ____ de  SUBMIT
2.  留學 ab ____ cdefa ____ gh  SUBMIT

注意到第 6 项和后面的输入框之间的巨大差距了吗？

我需要我的看起来像这样：

1.  喘氣  a ____ bc ____ de     SUBMIT
2.  留學 ab ____ cdefa ____ gh  SUBMIT

关于我如何做到这一点的任何想法？我很感激。

Answer 1

除非您开始使用一些非常复杂colspan的属性，否则您将无法仅使用<td>元素来做到这一点。

相反，您需要将所有想要的项目放在一个<td>元素中，而将所有其他项目放在自己的<td>元素中。

要使用您的示例...

<tr>
  <td>(row number)</td>
  <td>(Two Chinese characters)</td>
  <td>(1-5 characters)</td>
  <td>(input box 1)</td>
  <td>(1-5 characters) (input box 2) (1-5 characters)</td>
  <td>(submit button)</td>
</tr>