CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Leandro Faria
Leandro Faria

Reputation: 445

Round bordered table

I'd like to have an HTML table with a rounded border. I don't expect to have a round line bordering the table, but actually it's form to be rounded.

Please notice that both top row and bottom row should be rounded.

By the way, my actually table is using the "table table-bordered table-hover" css classes from bootstrap.

This is my actual table:

enter image description here

This is what I'm trying to do:

enter image description here Any ideas? Thanks!

Upvotes: 1

Views: 8711

Answers (4)

MrMarlow
MrMarlow

Reputation: 856

You can do this by adding border-radius to the css.

table {
   border-radius: 4px;
}

I've wrote a really quick example, so you can see output;

http://jsfiddle.net/oLrp862d/1/

Edited to include code here;

table {
    background: white;
    border: 1px solid #c3c3c3;
    border-radius: 5px;
    width: 50%;
    border-spacing: 0px;
    border-collapse: separate;
}
table th {
    font-weight: 600;
    font-size: 1.1em;
    text-align: center;
    background: #c6c6c6;
}
table td {
    background: transparent;
}
<table>
    <tr>
        <th>Name</th>
        <th>Amount</th>
    </tr>
    <tr>
        <td>Fake Name</td>
        <td>1,337</td>
    </tr>
    <tr>
        <td>Fake Name</td>
        <td>1,337</td>
    </tr>
    <tr>
        <td>Fake Name</td>
        <td>1,337</td>
    </tr>
</table>

Upvotes: 6

Sleek Geek
Sleek Geek

Reputation: 4686

Study the example below.

table {
   border-radius: 10px;
    border: solid 2px red;
    width: 400px;
    height: 400px;
    overflow: hidden;
  
}

tr:last-of-type td {
  border-bottom: none;
  }

tr td:last-child {
  border-right: none;
  }


td {
    text-align: center;
   border-bottom: solid 1px #000;
  border-right: solid 1px #000;
  
}
<table>
    <tr>
        <td>one</td>
        <td>one</td>
        <td>one</td>
    </tr>
    <tr>
        <td>one</td>
        <td>one</td>
        <td>one</td>
    </tr>
    <tr>
         <td>one</td>
        <td>one</td>
        <td>one</td>
    </tr>
</table>

Upvotes: -1

Ian Hazzard
Ian Hazzard

Reputation: 7771

Use this CSS code to round the corners:

.table-bordered {
  border-radius: 5px;
}

Upvotes: 1

Waxi
Waxi

Reputation: 1651

table tr:first-of-type {
    border-radius: 5px 5px 0 0;}

table tr:last-of-type {
    border-radius: 0 0 5px 5px;}

or put it on the table itself

table {
    border-radius: 5px;}

Upvotes: 1

Related Questions