把<hr>放在裏面<tr>

好我試過了表設計。我的問題顯示在下圖中。把<hr>放在裏面<tr>

我只是想設置border或hr在.total_amt_tr類。

我試過了裏的.chkout_hr類的hr標籤，但它不起作用。邊框頂部正在努力到.bordr_hr類。

我的問題是：

1.Is它使用hr內tr標籤不錯的辦法。

如果（不好）

{

如何設置邊境像圖像？

}

2.Border長度在左右兩端應該有一些空的空格。像邊界長度是90％，它應該居中。

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

來源

2017-01-07 Prasath V

沒有，'hr'不是tr'的'有效孩子。 'tr'唯一有效的孩子是'th'和'td' [whatwg：4.9.8 tr元素]（https://html.spec.whatwg.org/multipage/tables.html#the-tr-element ） –

不，它是無效的HTML（https：//developer.mozilla。org/en/docs/Web/HTML/Element/tr）你可以添加一個'

''但是有更好的方法可以使用CSS（border-bottom） –

如果你不想使用CSS邊框底部，由於90％的事情，那麼你可以使用下列內容：

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

來源

2017-01-07 11:46:35 smozgur

部分工作，但是如何在td中心td元素 –

hr已經居中對齊，你的其他單元格全部左對齊。從hr中刪除class =「chkout_hr」以查看。順便說一下，我真的推薦使用CSS解決方案，通過@ ssc- hrep3 - 除非你真的有充分的理由不這樣做 – smozgur

它是無效的HTML放<hr>轉化爲<tr>。

但是，您可以使用CSS來把90％線之上的.total_amt_tr：

.total_amt_tr:after { 
    content: ""; 
    display: block; 
    width: 90%; 
    height: 1px; 
    background: black; 
    position: absolute; 
    left: 5%; 
} 
table { 
    width: 100%; 
}

.total_amt_tr:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 90%; 
 
    height: 1px; 
 
    background: black; 
 
    position: absolute; 
 
    left: 5%; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
td { 
 
    background-color: #eee; 
 
}

<table> 
 
    <tr> 
 
    <td>test123</td> 
 
    <td>test123</td> 
 
    </tr> 
 
    <tr> 
 
    <td>test123</td> 
 
    <td>test123</td> 
 
    </tr> 
 
    <tr class="total_amt_tr"> 
 
    <td>result1</td> 
 
    <td>result2</td> 
 
    </tr> 
 
</table>

來源

2017-01-07 11:47:15

邊框在左邊重疊如何居中它 –

你可以增加'left：5％'我已經更新了這個例子 –

這可能更好使用''@Quentin的回答方法，因爲根據這個[答案]（http://stackoverflow.com/a/19589289/3），我的解決方案中顯示可能會從瀏覽器更改爲瀏覽器233827）。 –

是無效的投入以外的任何其他一個td或th作爲子元素的一個tr元素。

改爲構造您的代碼屬性。使用tfoot元素，然後對其應用邊界。您需要將表格邊框設置爲collapse才能做到這一點。

.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 { 
 
    border-collapse: collapse; 
 
} 
 
tfoot { 
 
    border-top: solid black 1px; 
 
}

<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> 
 
    </tbody> 
 
    <tfoot> 
 
    <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> 
 
    </tfoot> 
 
</table>

來源

2017-01-07 11:56:48 Quentin

把<hr>放在裏面<tr>

回答

相關問題