0

I have tried table design. And my problem is shown on below image.

image

I just want to set border or hr over .total_amt_tr class.

I tried the hr tag with .chkout_hr class inside of tr, but it was not working. border-top was working to .bordr_hr class.

My problem was:

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>
Prasath V
  • 1,336
  • 4
  • 20
  • 39
  • No, `hr` is not a valid child of `tr`. The only valid children for `tr` are `th` and `td` [whatwg: 4.9.8 The tr element](https://html.spec.whatwg.org/multipage/tables.html#the-tr-element) – t.niese Jan 07 '17 at 11:45
  • 1
    No, it's invalid HTML (https://developer.mozilla.org/en/docs/Web/HTML/Element/tr) You can add a `
    ` but there are better ways to do it using CSS (border-bottom)     – Alon Eitan Jan 07 '17 at 11:45

3 Answers3

1

If you don't want use CSS border-bottom due to 90% matter then you can use following:

<tr>
   <td colspan="5"><hr class="chkout_hr"></td>
</tr>
smozgur
  • 1,772
  • 1
  • 15
  • 23
  • hr in td is center aligned already, your other cells are all left aligned. Remove class="chkout_hr" from the hr to see that. By the way, I really recommend going with CSS solution by @ssc-hrep3 - unless you really have a good reason to not. – smozgur Jan 07 '17 at 12:02
1

It is invalid HTML to put an <hr> into a <tr>.

You can however use CSS to put a 90% line on top of .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>
ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
  • Border was overlapping on left side. How to center it. – Prasath V Jan 07 '17 at 11:58
  • It's probably better to use the `` approach of @Quentin 's answer, because the display may change from browser to browser in my solution according to this [answer](http://stackoverflow.com/a/19589289/3233827). – ssc-hrep3 Jan 07 '17 at 12:03
1

It is invalid to put anything other than a td or th as a child of a tr element.

Structure your code property instead. Use a tfoot element, then apply border to it. You'll need to set your table borders to collapse to do that.

.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>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335