CODEWITHSUNDEEP
htmlcss
Leem.fin
Leem.fin

Reputation: 42602

Newbie: How to have a row background in my case?

I have a very simple table:

<table border="1" class="my-table">
  <tr class="head">
       <th>head-1</th>
       <th>head-2</th>
       <th>head-3</th>
       <th>head-4</th>
       <th>head-5</th>    
  </tr>
  <tr>
      <div class="row-data">
           <td>data-1</td>
           <td>data-2</td>
           <td>data-3</td>
           <td>data-4</td>
           <td>data-5</td>
      </div>
  </tr>
 </table>

As you saw above, the second row <tr> contains a <div> which then contains <td>s , the reason why I did this is that I want to have a row background which has border-radius css feature for each row instead of for each column(<td>)

(I konw if I put <div> inside <td>, the following css will take effect, but that's not what I want see here , it is a column based border-radius background, however I need a row based one.)

my css:

.row-data{
    background-color:#ececec;
    border-radius:10px;
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
}

But it does not work in this way to have a row<tr> based border-radius css feature, how to get rid of it? You can run my code on jsfiddle here

Upvotes: 1

Views: 78

Answers (3)

Rob
Rob

Reputation: 4947

Instead of making a new div for it just add the class to the row: <tr class="row-data">

Upvotes: 3

sandeep
sandeep

Reputation: 92803

check this may be that you want http://jsfiddle.net/sandeep/EWPVc/24/

td{
    background-color:red;
}
td:first-child{
    border-radius:10px 0 0 10px;
   -webkit-border-radius:10px 0 0 10px;
   -moz-border-radius:10px 0 0 10px;
}
td:last-child{
     border-radius:0 10px 10px 0;
    -webkit-border-radius:0 10px 10px 0;
    -moz-border-radius:0 10px 10px 0;
 }

Upvotes: 1

Robby Shaw
Robby Shaw

Reputation: 4915

border-radius can apply on table, but not the row. Check out this demo of border-radius for table: http://vamin.net/examples/rounded_tables.html

Upvotes: 0

Related Questions