在 HTML 中创建只有底部边框的表格

Posted 2023-03-05

【中文标题】在 HTML 中创建只有底部边框的表格

【英文标题】：Create table with only bottom border in HTML

【发布时间】：2017-04-15 05:19:29

【问题描述】：

我正在尝试将此页面的员工目录部分从 CSS、javascript 和 html 复制到 HTML。最重要的是，我希望能够像您在此处看到的那样制作一张表格，每条线只有底部边框/分隔线（或其他任何名称）。我该怎么做？

http://sps.columbia.edu/about/staff-directory

谢谢！

编辑：

我只需要 HTML，请不要 CSS。不过还是谢谢！

【问题讨论】：

我建议您首先检查您尝试复制的员工目录的代码/css，然后看看他们是如何做到的。然后尝试解决方案。如果您仍然遇到问题，请在此处发布您的代码，我们可以为您提供帮助。

感谢您的帮助，但我只需要 HTML 格式。我不能使用 CSS 或 HTML 以外的任何东西。

可以在 HTML 中使用内联样式吗？

我猜我做不到，因为我在下面尝试了 Random Developer 的代码，它只是将它保留为表格格式的常规盒装。这不是内联样式的实例吗？

你需要更多的内联样式来支持。让我给你做个标记。

【参考方案1】：

只需使用以下代码-sn-p 并将其粘贴到您的 style.css 中

table 
  border-collapse: collapse;


tr
  border-bottom: 1px solid black;

<table>
  <tbody>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
  </tbody>
</table>

不使用 style.css

<table style="border-collapse: collapse;">
  <tbody>
    <tr style="border-bottom: 1px solid black;">
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
  </tbody>
</table>

【讨论】：

感谢您的帮助，但我只需要 HTML 格式。我不能使用 CSS 或 HTML 以外的任何东西。

刚刚添加了 html-only 版本。

这确实需要选为正确答案@Lorber

这只是 inline-css，但仍然是 css。我看到使用纯 HTML 实现此目的的唯一方法是在 <td> 中创建一个高度为 1 和 bgcolor 的额外 <tr><td>。

【参考方案2】：

我相信您想从 table.directory tr 中删除边框并将其添加到 tbody 元素中。

这将为您在每个部分之间提供一个边框。

【讨论】：

啊我想我在这里不清楚，但我只想要表格中每一行文本下方的灰线。我似乎无法在 HTML 中重新创建它，只能在表格中装箱的常规行的所有边。你知道怎么做吗？

你可以在每一行之间插入一个分隔图：

你想要行之间的水平线吗？如：

【参考方案3】：

你可以用这个

<table style="border-bottom: 1px solid black">
  <tr>
               <td>Someone</td>
       </tr>
  </table>

【讨论】：

嗯，我看到它在代码 sn-p 中有效，我很感激。但是当我尝试将它放在代码的上下文中时，它并没有改变任何东西。它只是一张普通的桌子，四面都是盒装的。有什么想法吗？

嗯，它也应该在代码的上下文中改变

我什至尝试在其他所有内容之外发布您的确切代码，它只是一个普通的表格框。

这被认为是内联样式吗？也许我不能用那些。

【参考方案4】：

这是一个带有内联样式的纯 HTML 版本。

注意 TABLE 上的“border-collapse”、TR 上的“border-bottom”和“line-height”以及 TD 上的“width”等样式

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 80%; margin: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 0.85em;">
  <tbody>
    <tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
      <td style="width: 70%; font-weight: bold;">Dean</td>
      <td style="width: 30%; text-align: right;">Joe Cool</td></tr>
    <tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
      <td style="width: 70%; font-weight: bold;">Senior Vice Dean</td>
      <td style="width: 30%; text-align: right;">Jane Cool</td></tr>
    <tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
      <td style="width: 70%; font-weight: bold;">Vice Dean</td>
      <td style="width: 30%; text-align: right;">John Doe</td>
    </tr>
  </tbody>
</table>

【参考方案5】：

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>Dean</td>
    </tr>
    <tr>
      <td><hr /></td>
    </tr>
    <tr>
      <td>Jane</td>
    </tr>
    <tr>
      <td><hr /></td>
    </tr>
    <tr>
      <td>Scott</td>
    </tr>
    <tr>
      <td><hr /></td>
    </tr>
    
  </tbody>
</table>