当前位置：文江博客话题详情

为什么我的表格中的最后 3 行单元格没有与 HTML 表格中的第一行完美对齐？

发布于 2024-09-14 12:20:26 字数 564 浏览 2 评论 0原文

这是链接我的表格行未对齐的示例

单击左上角的预览JS Bin 菜单栏可以看到这个示例的工作原理。您可以看到带有电子邮件和输入字段的表格单元格的顶部 2 个边框比左侧 2 个表格单元格的顶部 2 个边框稍低其中（用户名和输入字段）。

为什么会发生这种情况？

另外我发现我必须在第二个元素中为和元素编写 rowspan="4"让它们跨越旁边的 3 行。为什么我必须这样做？如果我只需要清除 3 行，那就没有意义了。就好像某处隐藏着一个神秘的行。

更新示例答案：

我在这个示例中实现了答案。如您所见，有所有表格单元格之间完美对齐。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北方。的韩爷 2024-09-21 12:20:26

对...简单...

基本上，第二行需要有 4 个单元格，用户名和输入单元格以及电子邮件和输入单元格...

用户名和输入单元格需要有 rowspan=" 3" 然后接下来的两行需要是密码和新密码及其输入字段。

代码：

<html>
  <head>
  </head>
  <body>
    <table border="1">
      <tbody>
        <tr>
          <th colspan="4" rowspan="1">
            <h3>Profile Settings</h3>
          </th>
        </tr>
        <tr>
          <th rowspan="3">
            <label for="">USERNAME:</label>
          </th>
          <td rowspan="3">  
            <input type="text">
          </td>
          <th>
            <label for="">Email:</label>
          </th>
          <td>  
            <input type="text">
          </td>  
        </tr>
        <tr>
          <th>
            <label for="">Password:</label>
          </th>
          <td>  
            <input type="password">
          </td>  
        </tr>  
        <tr>
          <th>
            <label for="">New Password:</label>
          </th>
          <td>  
            <input type="password">
          </td>  
        </tr>
        <tr>
          <td colspan="4">  
            <input type="button" value="save">
          </td>  
        </tr>
      </tbody>
    </table>
  </body>
</html>

right... easy peasy...

basically, the second row needs to have 4 cells in it, the username and input cells AND the email and input cells...

the username and input cells need to have rowspan="3" and then the NEXT two rows need to be password and new password with their input fields.

code:

<html>
  <head>
  </head>
  <body>
    <table border="1">
      <tbody>
        <tr>
          <th colspan="4" rowspan="1">
            <h3>Profile Settings</h3>
          </th>
        </tr>
        <tr>
          <th rowspan="3">
            <label for="">USERNAME:</label>
          </th>
          <td rowspan="3">  
            <input type="text">
          </td>
          <th>
            <label for="">Email:</label>
          </th>
          <td>  
            <input type="text">
          </td>  
        </tr>
        <tr>
          <th>
            <label for="">Password:</label>
          </th>
          <td>  
            <input type="password">
          </td>  
        </tr>  
        <tr>
          <th>
            <label for="">New Password:</label>
          </th>
          <td>  
            <input type="password">
          </td>  
        </tr>
        <tr>
          <td colspan="4">  
            <input type="button" value="save">
          </td>  
        </tr>
      </tbody>
    </table>
  </body>
</html>

回复收藏 0 原文