Welcome to WebmasterWorld Guest from 3.233.226.151

Forum Moderators: not2easy

Message Too Old, No Replies

Can't get rounded corners to work on tables

Either old corners bleed through, or not centered, or first row is offset

     
9:26 pm on Mar 23, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 12, 2003
posts: 1208
votes: 0


I'm having a hair-pulling cross-browser problem that's reminding me of all the time I spent trying to get things to look the same on all browsers around 15 years ago. We've made so much progress, and it's been years since I had to deal with something like this, but here we go again.

I'm trying to round the top-left and top-right of a table. I've tried various approaches, but each has a fatal flaw, such as:

* The first row is offset in Firefox
* Table not centered, or
* Corners are rounded, but square corner borders also show in Firefox

Sample HTML:

<table>
<tr>
<td colspan=3>Horked Tables Company</th>
</tr>
<tr>
<td>Firefox</td>
<td>crap</td>
<td>still</td>
</tr>
<tr>
<td>Safari</td>
<td>OMG</td>
<td>kittens</td>
</tr>
</table>


This results in the first row being offset in Firefox:
table {
border-collapse: collapse;
margin:auto;
font: 13px Arial;
}

td {
padding: 10px;
border: solid 1px gray;
background: wheat;
}

tr:first-child td {
border-radius:12px 12px 0px 0px;
border: none;
text-align:center;
background:black; color:orange;
font:18px Arial; font-weight:bold;
}


This fixes the offset problem, but then the corners aren't rounded.
table {
border-collapse: collapse;
margin:auto;
font: 13px Arial;

border-radius:12px 12px 0px 0px;
}

td {
padding: 10px;
border: solid 1px gray;
background: wheat;
}

tr:first-child td {
text-align:center;
background:black; color:orange;
font:18px Arial; font-weight:bold;
}



Adding "overflow:hidden" to the <table> definition rounds the corners, but the square corners bleed through. I can add "border:none" to the <td> definition, but then I'm back to the first problem, that the first row is offset in Firefox.
table {
border-collapse: collapse;
margin:auto;
font: 13px Arial;

overflow:hidden;
border-radius:12px 12px 0px 0px;
}


Adding "display:inline-block" to the <table> definition fixes the corners, but then the table isn't centered. ("display:block" and "display:inline" don't work, either.) I could wrap the whole table in a <div style="text-align:center">, but dude.
table {
border-collapse: collapse;
margin:auto;
font: 13px Arial;

overflow:hidden;
display:inline-block;
border-radius:12px 12px 0px 0px;
}


Do I just have to either accept the offset, or wrap the table in a <div> to center it? Or is there some solution that doesn't require doubling the code?
12:54 am on Mar 24, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2738
votes: 837


There is a small typo in you html.

Your header row starts as a <td> tag but closes as a </th>. It should be <th></th> and then in your css tr:first-child td can simply be th, but you will have to add padding:10px; to it.

Unfortunately I don't think this solves the problem you are describing.
1:11 am on Mar 24, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2738
votes: 837


I'm stumped!

The best I could is this:

table {
border-collapse: collapse;
margin:auto;
font: 13px Arial;
}

td {
padding:10px;
border: solid 1px gray;
background: wheat;
}

th {
padding: 10px;
border-radius:12px 12px 0px 0px;
border: solid 1px #fff;
border-bottom: solid 1px #000;
text-align:center;
background:black; color:orange;
font:18px Arial; font-weight:bold;
}


I set the border color to the same as the background (white), and then set the bottom-border color to black. Like this it centers the top row. The borders of the rows below still sticks out, but at least it is centered.

[jsfiddle.net...]
2:59 am on Mar 24, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


I used border-collapse on the th element to get rid of the box around it:
th {
padding: 10px;
border-collapse:collapse;
border-radius:12px 12px 0 0;
border-bottom:solid 1px #000;
text-align:center;
background:black; color:orange;
font:18px Arial; font-weight:bold;
}


5:05 am on Mar 24, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 12, 2003
posts: 1208
votes: 0


Thanks guys for giving this a shot.

It's not convenient for me to use <th>, because my WYSIWYG editor doesn't automatically generate those. I could go in and tinker with the HTML by hand, but that's cumbersome and I'd prefer not to.

In any event, even if I used <th>, adding border-collapse to it still seems to result in the first row being offset in Firefox.

Anyway, if someone had jumped in with an easy answer then I would have felt dumb for missing something obvious. So I guess there's a silver lining to their being no solution (so far). Though, if I could choose, I think I'd rather feel dumb and have my pages look proper in Firefox without having to wrap my tables in a <DIV> rather than feel not so dumb...
7:24 am on Mar 24, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10560
votes: 1122


These are visual aspects. Nice for the eyes but not required for TABLE DATA. Me? I keep it simple. A Table is a Table and corners are corners, usually square. What's inside is more important than what's outside.

Don't over-think things. Border=0 can solve a lot of problems in a hurry.

Different point of graphics designer view...
11:51 am on Mar 24, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there MichaelBluejay,
here is a very simple solution to your dilemma...


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
background-color: #f0f0f0;
font: 100% / 160% arial, helvetica, sans-serif;
text-align: center;
}

#table-container {
display: inline-block;
border-radius: 0.75em 0.75em 0 0;
box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.3 );
overflow: hidden;
}

table {
margin: auto;
border-collapse: collapse;
font-size: 0.8em;
}

td {
padding: 0.625em;
border: 1px solid #808080;
background: #f5deb3;
text-align: left;
}

th {
padding: 0.625em;
border: 1px solid #000;
background-color: #000;
font-size: 1.4em ;
color: #ffa500;
}
</style>

</head>
<body>

<div id="table-container">
<table>
<thead>
<tr>
<th colspan="3">Horked Tables Company</th>
</tr>
</thead>
<tbody>
<tr>
<td>Firefox</td>
<td>crap</td>
<td>still</td>
</tr><tr>
<td>Safari</td>
<td>OMG</td>
<td>kittens</td>
</tr>
</tbody>
</table>
<!-- #table-container --></div>

</body>
</html>


birdbrain
2:04 pm on Mar 24, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2738
votes: 837


@Birdbrain

Nice, I knew that a wrapper(container) would solve it, but I was missing the overflow:hidden; when I tried it.

Note: the table is being centered by text-align:center; in the <body> styling. This may not be desirable as it will impact many other elements on the page. To overcome this you can simply wrap the table-container div in another div and then style it with the styling of the body tag.
9:09 pm on Mar 24, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 12, 2003
posts: 1208
votes: 0


Thanks, Birdbrain. I'm afraid I wouldn't count that as a solution because, like I said, I can already get it to work by wrapping the table in a DIV. I'm looking for a table-only solution. It looks like there isn't one...if I want it to work in Firefox.