Question

我正在尝试将此页面的Staff Directory部分从CSS，Javascript和HTML复制到HTML。最重要的是，我希望能够像你在这里看到的那样制作一张桌子，每条线只有底部边框/分隔线（或者它们叫做的任何东西）。我该怎么做？

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

谢谢！

编辑：

我只需要HTML，不需要CSS。谢谢你！

Answer 1

只需使用以下代码段并将其粘贴到style.css

即可

tr {
border-bottom: 1px solid #ccc;
}

不使用style.css

<table>
  <tr style="border-bottom: 1px solid red">
    <td>Table Cell</td>
  </tr>
</table>

Answer 2

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

注意表格上的“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>

Answer 3

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

这会在每个部分之间给你一个边框。

Answer 4

你可以用这个

＆＃13;

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

＆＃13;

Answer 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>

在HTML中创建仅包含底部边框的表格

5 个答案: