How can I give this table rounded borders and still maintain the color scheme I have?

Question

I'd prefer not to use tables while doing this, but I don't know how else to go about it. Basically, I want a table with alternating white & grey rows. The table needs to have a rounded border and there should be borders in between the individual rows (but NO column borders).

Here's what I've got so far: http://jsfiddle.net/zVDyh/1/

Even though I am setting the border radius, it doesn't seem to affect the table's border at all.

There's an answer here about this already. Check this out http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i — boruch, Jul 05 '12 at 16:50
simplest solution may be to style the table as you want it without an outer border. Put the entire table into a DIV and give the DIV rounded corners. — DA., Jul 05 '12 at 17:03

score 2 · Answer 1 · answered Jul 05 '12 at 16:49

2

Set a width and make it block display:

.my_table {
    border: 1px solid $grey;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: block;
    width: 90%;
}

Here's the updated fiddle! :)

answered Jul 05 '12 at 16:49

Praveen Kumar Purushothaman

164,888
24
203
252

The width part isn't necessary, is it? – TheZ Jul 05 '12 at 16:49
No but, if you remove it, it looks awkward... Better to set a width to contain the inner things. Yeah, width part is necessary! – Praveen Kumar Purushothaman Jul 05 '12 at 16:50
So, not _necessary_ but a stylistic choice. – TheZ Jul 05 '12 at 16:51
My opinion as a Front End Engineer would be it is necessary! :) – Praveen Kumar Purushothaman Jul 05 '12 at 16:53
thanks Praveen! However, I'm seeing a problem here: there seems to be an inside border of some sort... as I increase the border radius, the inside border is more & more visible. I can also switch to using only divs, but that seems like it would be a pretty big headache. Sadly I can't get rid of this inside border though ... – Ringo Blancke Jul 05 '12 at 17:02
Remove the border for the `td` and not for the `tr`! Check out: http://jsfiddle.net/zVDyh/13/ – Praveen Kumar Purushothaman Jul 05 '12 at 17:13

score 0 · Accepted Answer · answered Jul 05 '12 at 17:01

Here is how to do it with DIVs:

http://jsfiddle.net/RRd2e/

<div class="con">
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
</div>

.con {
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.row { 
    height: 38px; 
    border-bottom:1px solid #ccc; 
}
.row:nth-child(even) {
     background:#e3e3e3;
}
.row:last-child {
    border-bottom:none;
}
.col { 
    width:50px; 
    line-height:38px; 
    display:inline; 
}

You could use divs, but the data is really calling for a table, and I'd suggest one uses a table for it. — DA., Jul 05 '12 at 17:03
I agree, data output requires tables. The OP mentioned he would like to use divs and I was a bit bored so I threw the sample together. — Lowkase, Jul 05 '12 at 17:04
Oh wow - thanks a lot, this is cool. I'm curious though - what do you mean "the data is calling for a table"? — Ringo Blancke, Jul 05 '12 at 17:10
When you are displaying tabular data on a web page it is best practice to use tables. Really that is the one major case to use tables, mostly everything else should be contained in divs. — Lowkase, Jul 05 '12 at 17:12

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

Thanks for all the help Praveen Kumar + Lokase. This was the easiest answer for me to follow though: CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

It links to this page: http://vamin.net/examples/rounded_tables2.html (look at the last example - cellspacing = 0)

edited May 23 '17 at 12:04

Community

1
1

answered Jul 05 '12 at 19:34

Ringo Blancke

2,444
6
30
54

How can I give this table rounded borders and still maintain the color scheme I have?

3 Answers3