html - 放在里面好不好

Question

我尝试过表格设计。我的问题如下图所示。

我只想在 .total_amt_tr 类上设置 border 或 hr。

我在 tr 中尝试了带有 .chkout_hr 类的 hr 标签，但它没有用。 border-top 正在为 .bordr_hr 类工作。

我的问题是:

1.Is it good approach to use hr inside tr tag.

if (not good)

{

How to set border as like in image?

}

2.Border length should have some empty spaces on right and left end. Like border length was 90% and it should be centered.

.ordr_table_two{
    width: 100%;
}
.amount_blue{
    font-size: 17px;
    color: #2795CA;
    font-weight: 500;
    text-transform: capitalize;
}
.amount_blue .icon_rupee i{
    color: #2795CA;
}
.ordr_table_two thead tr th{
    text-transform: capitalize;
    padding: 13px 0px 13px 0px;
    font-weight: 600;
    font-size: 15px;
}
.ordr_table_two tbody tr td{
    text-transform: capitalize;
    font-weight: 300;
    font-size: 14px;
    padding: 2px 0px 2px 0px;
}
.ordr_table_two tbody tr td p{
    text-transform: uppercase;
}
.chkout_hr{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: table;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #E2E2E2;
}
.total_amt{
    color: #2795CA;
    font-size: 17px;
    font-weight: 400;
}
.total_amt_blue{
    color: #2795CA;
}
.total_amt_blue i{
    margin-right: 4px;
}
.total_amt_tr{
    height: 50px;
}
.total_amt_tr .total_amt_txt{
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
    padding-left: 5%;
}

<table class="ordr_table_two">
<thead>
<tr>
 <th>ticket no:</th>
 <th>attendee name:</th>
 <th>attendee type:</th>
 <th>activity date:</th>
 <th>amount:</th>
</tr>
</thead>
 <tbody>
    <tr>
       <td><p>tnpge_206</p></td>
       <td>prabagaran</td>
       <td>member</td>
       <td>jan 03,2016 - 11:15 AM</td>
       <td><p class="amount_blue"><span class="icon_rupee"><i class="fa fa-inr" aria-hidden="true"></i></span>1000.00</p></td>
    </tr>
 <tr>
   <td><p>tnpge_207</p></td>
   <td>rajkumar</td>
   <td>non-member</td>
   <td>jan 03,2016 - 11:15 AM</td>
   <td><p class="amount_blue"><span class="icon_rupee"><i class="fa fa-inr" aria-hidden="true"></i></span>1000.00</p></td>
 </tr>
  <tr>
    <td><p>tnpge_209</p></td>
    <td>dinesh kumar</td>
    <td>PG Trainee</td>
    <td>jan 03,2016 - 11:15 AM</td>
    <td><p class="amount_blue"><span class="icon_rupee"><i class="fa fa-inr" aria-hidden="true"></i></span>1000.00</p> </td>
  </tr>

 <tr class="bordr_hr"><hr class="chkout_hr">
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
 </tr>

 <tr class="total_amt_tr">
   <td></td>
   <td></td>
   <td></td>
   <td class="total_amt_txt">total amount:</td>
   <td><p class="total_amt"><span class="total_amt_blue"><i class="fa fa-inr" aria-hidden="true"></i></span>4000.00</p></td>
 </tr>
   </tbody>
   </table>

Answer 1

如果你不想使用 CSS border-bottom 由于 90% 问题，那么你可以使用以下内容:

<tr>
   <td colspan="5"><hr class="chkout_hr"></td>
</tr>