Как добавить горизонтальную линию после второго ряда?

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

Это всегда хорошо, чтобы использовать лучшие практики. Например: th следует разместить внутри thead и содержимого внутри tbody. Еще одна вещь, поскольку те же стили привыкают, ее лучше применять через css. Здесь Вы можете найти код:

HTML

<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

.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; 
    }