CODEWITHSUNDEEP
htmlcss
Frank
Frank

Reputation: 1864

HTML table css border issues

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?

Upvotes: 2

Views: 605

Answers (2)

prosborne
prosborne

Reputation: 61

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

Upvotes: 0

J&#248;rgen R
J&#248;rgen R

Reputation: 10806

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.

Upvotes: 2

Related Questions