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

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

@Sotiris, I agree with you, I made that just to emphasis what I want to achieve, that's a row based background has the border-radius, not a column based one. — Leem.fin, Oct 20 '11 at 10:06
Rob is right. Does this help? http://stackoverflow.com/questions/1407371/webkit-and-moz-border-radius-does-not-work-on-tables — Dennis Hunink, Oct 20 '11 at 10:08

Rob · Answer 1 · 2011-10-20T10:50:32.013

3

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

edited Oct 20 '11 at 10:50

answered Oct 20 '11 at 10:01

Rob

4,927
12
49
54

No, I tried, it does not work, I mean the background of the row does not have border-radius which is my most concerned feature in this post. – Leem.fin Oct 20 '11 at 10:03
I really do not understand why people continue voting this answer useful, this answer does not work, I tried it before I post the question, see here http://jsfiddle.net/EWPVc/20/ , there is no border-radius on the row background – Leem.fin Oct 20 '11 at 10:05
@ Rob, you can't say the border-radius not work, it works, for example if I put the div inside , check here http://jsfiddle.net/EWPVc/25/ , if you read my question carefully, you will understand what I want to achieve. – Leem.fin Oct 20 '11 at 10:08
@ Rob, are you using Opera browser, because the css for border radius won't work on Opera only, other browsers should be fine. – Leem.fin Oct 20 '11 at 10:13

sandeep · Accepted Answer · 2011-10-20T10:22:29.450

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

edited Oct 20 '11 at 10:22

answered Oct 20 '11 at 10:08

sandeep

91,313
23
137
155

@ sandeep, yes, this is working, by the way, how should I add space between rows I mean between ? – Leem.fin Oct 20 '11 at 10:14
check this http://stackoverflow.com/questions/6856114/css-space-between-trs-with-trs-as-contiguous-blocks – sandeep Oct 20 '11 at 10:22

score 0 · Answer 3 · answered Oct 20 '11 at 10:15

0

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

answered Oct 20 '11 at 10:15

Robby Shaw

4,725
1
14
11

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

3 Answers3