2

Here's my HTML code.

<table cellspacing="0" class="assets_table">
<tbody>
<tr class="table_header"><td>ID</td><td>Title</td><td>Regarding</td><td>Status</td><td>Date</td></tr>
<tr><td>9</td><td>Testing</td><td>hijacked account</td><td></td><td> 4 Jan, 2012</td></tr></tbody>
</table>

and here's the CSS for it.

.assets_table{width:100%;border-radius:4px 4px 0 0;border:1px solid #ccc;overflow:hidden}
.assets_table .table_header{background:grey;height:30px;font-weight:bold;padding:0;border-top:1px solid #f9f9f9;}
.assets_table td {padding:5px 10px}
.assets_table tr {border-top:1px solid #ddd;padding:0 10px;}

But no paddings or borders or border-radius's practicably nothing will work on the tr's. Here is what I get. http://pastehtml.com/view/bjmptfulh.html

I have tried everything I can think of but nothing works? I tried display:table and display:block but it just kinda messes up the table. Any help here?

Jørgen R
  • 10,568
  • 7
  • 42
  • 59
Frank
  • 1,844
  • 8
  • 29
  • 44
  • What browser are you using? Your example looks fine for me in Safari. – Brett Pontarelli Jan 04 '12 at 19:46
  • I'm using chrome, I don't think you know what I'm expecting it to do, if you look at the `tr` attribute in the css. It says `border-top:1px solid #ddd;padding:0 10px;` and it clearly doesn't have a grey border at the top and hasn't got a top and bottom padding of 10px. – Frank Jan 04 '12 at 19:50

2 Answers2

2

I think you need to apply the css to the td elements, as explained in this post: Space between two rows in a table?. Otherwise your code looks fine.

Community
  • 1
  • 1
Jørgen R
  • 10,568
  • 7
  • 42
  • 59
0

If you view your code in Chrome, it actually works with the rounded corners on your table as well as all yoru other styles. If you are not using Chrome or a webkit browser (safari, chrome) then you will need to add other border-radius tags.

For mozilla (Firefox) you will need to add -moz-border-radius: 4px 4px 0 0; For Opera you will need to add -o-border-radius: 4px 4px 0 0; I also add -khtml-border-radius: 4px 4px 0 0; for some of the older versions of Opera and browsers that use the Konqueror web browser.

You will also need to check the syntax of these different forms of the styles as not everything uses the identical markup. For instance, -moz- uses -mox-border-radius-topright to change the top right corner while -webkit- uses -webkit-border-top-left-radius to adjust just that one corner.

Here is a good article on border radius and some of these new CSS3 tags. Thsi article is from 2009 so some things have already changed:

CSS Tricks border radius example

prosborne
  • 61
  • 5