如何在表中的每一行之间获得实线？

Question

Html不是我的专长:)）

我有一个Html表，我想在每一行之间有一条实线。我已经通过在每个border-bottom代码上定义<td>来完成此操作，如下所示：

<td style="border-bottom: 1px solid #0066ff;">[content]</td>

但它出现了一个像素间隙，如下所示：

我尝试将border-bottom放在<tr>标记中，但这根本不起作用。这样做的正确方法是什么？

Answer 1

试试这个。

table {
    border-collapse: collapse;
}

td {
    padding: 10px 0;
}

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

Answer 2

您可以使用CSS属性border-collapse并将其设置为collapse：

＆＃13;

＆＃13;

table
{
  border-collapse: collapse;
}

td
{
  border-bottom: solid 1px black;
}

＆＃13;

<table>
  <tr>
    <td>Test</td>
    <td>Test 2</td>
    </tr>
  <tr>
    <td>Test</td>
    <td>Test 2</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将cellspacing 0赋予表格

<table cellspacing="0">
   <tr>
      <td style="border-bottom: solid 1px;">sdfa</td>
      <td style="border-bottom: solid 1px;">asfsaf</td>
   </tr>
</table>

示例：JSFiddle