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

问题描述：

我试图将CSS，Javascript和HTML这个页面的职员目录部分复制到HTML中。最重要的是，我希望能够制作一张桌子，就像您在这里看到的那样，每一行只有底部边框/分隔线（或任何它们被称为）。我怎么做？在HTML中创建只有底部边框的表格

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

谢谢！

编辑：

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

我建议你先检查你正在试图复制的工作人员目录的代码/ css和怎么看你这样做。然后尝试一下解决方案。如果你仍然坚持在这里发布你的代码，我们可以帮助你。 – haltersweb

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

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

答

只需使用下面的代码片段，并粘贴在你的style.css

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

不使用的style.css

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

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

只是添加了纯html版本。 – Martin2904

答

我相信你想从表中删除边框。目录tr并将其添加到tbody元素。

这会给你一个每个部分之间的边界。

啊我想我在这里并不清楚，但我只是想要表格中每行文字下方的灰线。我似乎无法用HTML格式重新创建它，只能在表格中用线框装饰。你知道怎么做吗？ – Lorber

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

你想在行之间使用水平线吗？如： – bytanyar

答

您可以使用此

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

嗯，我看到它在代码片段中的作品，我欣赏这一点。但是，当我尝试将它放在代码的上下文中时，它不会改变任何内容。它仍然是一个常规桌子，四面装盒。有什么想法吗？ – Lorber

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

我试过甚至发布你的确切代码以外的其他东西，它只是一个普通的表格框。 – Lorber

答

这里是一个纯HTML版本内嵌样式。

通知款式喜欢上了阵

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

答

“边界崩溃”在桌子上，“下边框”和“行高”的红素，和“宽度”

<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中创建只有底部边框的表格

相关推荐