CODEWITHSUNDEEP
htmlcss
Ringo Blancke
Ringo Blancke

Reputation: 2444

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

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.

Upvotes: 1

Views: 158

Answers (3)

Ringo Blancke
Ringo Blancke

Reputation: 2444

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)

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

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; 
}

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

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! :)

Upvotes: 2

Related Questions