CSS Round uppr corners of table row

StackOverflow https://stackoverflow.com/questions/15997502

  •  03-04-2022
  •  | 
  •  

سؤال

I am setting the background color of table rows to give them a visual presence. I've been stymied in doing something I thought would be pretty simple which is rounding the corners of a row. I've created a class that works on a whole table but can't get it to work on the row. (Can't put it on whole table as table has some stuff in it that should not be rounded.) Have tried putting the class in the table row, the table cell inside it and span all to no avail. Would appreciate any suggestions.

css

<head>
    <style>
        .rounded { 
            -moz-border-radius: 15px; 
            border-radius: 15px; 
        }
    </style>
</head>

html

<table>
    <tr><td colspan=3 >Some stuff at top of table where background is white</td></tr>
    <tr style="background-color:silver" class="rounded">
        <td colspan=3 class="rounded"><span class="rounded">Text where background is shaded where I want background shaded</span></td>
    </tr>
</table>
هل كانت مفيدة؟

المحلول

The answer to this question will probably help you out (doesn't look like it's possible to achieve rounded corners on tables rows... at least not in all browsers.):

CSS3 border-radius on display:table-row element

Note: This question is regarding displaying divs as rows but it is equivalent to using rows.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top