将<hr />放入其中是否合适？

时间：2017-01-07 11:41:33

标签： html css

我试过桌面设计。我的问题如下图所示。

image

我只想将border或hr设置为.total_amt_tr级。

我在.chkout_hr内部使用tr类尝试了hr标记，但它无效。 border-top正在为.bordr_hr课程工作。

我的问题是：

  

1.在hr标记内使用tr是一种很好的方法。

     

if（not good）

     

{

     

如何在图像中设置边框？

     

}

     

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>

3 个答案:

答案 0 :(得分：1)

将<hr>放入<tr>。

是无效的HTML

但是，您可以使用CSS在.total_amt_tr之上添加90％的行：

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

答案 2 :(得分：0)

如果你不想因为90％的问题而使用CSS border-bottom，那么你可以使用以下内容：

string[] values;
StorageFolder folder = ApplicationData.Current.LocalFolder; // Put your location here.
IList<string> lines = await FileIO.ReadLinesAsync(await folder.GetFileAsync("Words.txt"););
lines.CopyTo(values, 0);
相关问题
最新问题