如何在第二行后添加水平线？

Question

这是我的代码：Codepen。我需要在第二行之后添加一条水平线。我该怎么办，如图所示：

<table class="tg1">
    <tr>
        <th class="tg-031e1" colspan="4">Email</th>
        <th class="tg-yw4l1" colspan="4">Order Details</th>
    </tr>
    <tr>
        <td class="tg-yw4l1" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;">xyz@gmail.com<br>
            Telephone: 657676767676<br>
            IP Address: 102.364.134.93<br>
            Order Status: Pending</p>
        </td>
        <td class="tg-yw41l" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;">xxx@gmail.com<br>
            Telephone: 657676767676<br>
            IP Address:000.000.00.01<br>
            Order Status: Pending</p>
        </td>
    </tr>
</table>

Answer 1

试试这个代码：

table {
    border-collapse: collapse;
}
tbody > tr:first-child {
    border-bottom: 4px solid #ccc;
}

<table class="tg1">
      <tr>
        <th class="tg-031e1" colspan="4">Email</th>
        <th class="tg-yw4l1" colspan="4">Order Details</th>
      </tr>
      <tr>
        <td class="tg-yw4l1" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;">xyz@gmail.com<br>
                                Telephone: 657676767676<br>
                                IP Address: 102.364.134.93<br>
                                Order Status: Pending</p>
        </td>
        <td class="tg-yw41l" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;">xxx@gmail.com<br>
                                Telephone: 657676767676<br>
                                IP Address:000.000.00.01<br>
                                Order Status: Pending</p>
        </td>
      </tr>
    </table>

Answer 2

只需使用colspan =“8”编辑表格的新行，然后插入例如水平标尺

<table class="tg1">
      <tr>
        <th class="tg-031e1" colspan="4">Email</th>
        <th class="tg-yw4l1" colspan="4">Order Details</th>
      </tr>
      <tr>
        <td colspan="8"><hr></td>
      </tr>
      <tr>
        <td class="tg-yw4l1" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;">xyz@gmail.com<br>
                                Telephone: 657676767676<br>
                                IP Address: 102.364.134.93<br>
                                Order Status: Pending</p>
        </td>
        <td class="tg-yw41l" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;">xxx@gmail.com<br>
                                Telephone: 657676767676<br>
                                IP Address:000.000.00.01<br>
                                Order Status: Pending</p>
        </td>
      </tr>
    </table>

Answer 3

利用最佳实践总是好的。例如：thead应放在tbody内，内容放在 <table class="tg1"> <thead> <tr> <th class="tg-031e1" colspan="4">Email</th> <th class="tg-yw4l1" colspan="4">Order Details</th> </tr> </thead> <tbody> <tr> <td class="tg-yw4l1" colspan="4"> <p> xyz@gmail.com<br> Telephone: 657676767676<br> IP Address: 102.364.134.93<br> Order Status: Pending </p> </td> <td class="tg-yw41l" colspan="4"> <p> xxx@gmail.com<br> Telephone: 657676767676<br> IP Address:000.000.00.01<br> Order Status: Pending </p> </td> </tr> </tbody> </table> 内。还有一件事，因为相同的样式被使用，最好通过css应用。请在下面找到代码：

<强> HTML

.tg1 {
    border-collapse: collapse;
}

    .tg1 thead {
        border-bottom: 1px solid gray;
    }

    .tg1 tbody p {
        font-family: Arial, Helvetica, sans-serif;
        color: #555555;
        font-size: 14px;
        padding: 5px;
    }

<强> CSS

FB.api(
  '/me',
  'GET',
  {"fields":"friends{email,name,work,education,birthday}"},
  function(response) {

  }
);