Question

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

Answer 1

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;
 }