1

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!

Siguza
  • 21,155
  • 6
  • 52
  • 89
Leandro Faria
  • 445
  • 2
  • 11
  • 25
  • 3
    .... Use border-radius ? .... What have you tried? – DaniP Dec 23 '14 at 13:25
  • 1
    See [Rounded tables in Twitter Bootstrap 3](http://stackoverflow.com/questions/18729638/rounded-tables-in-twitter-bootstrap-3) – ckuijjer Dec 23 '14 at 13:28
  • Hi @Danko I did tried but it was not working because of the bootstrap class "table" and "table-bordered". In the end the "overflow:hidden" attribute was preventing it from working, and I'm not really sure why. But it worked anyway! Thanks to all. – Leandro Faria Jan 05 '15 at 11:34

4 Answers4

6

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>
MrMarlow
  • 856
  • 4
  • 17
1
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;}
Waxi
  • 1,641
  • 2
  • 14
  • 20
  • This is not really working. Am I missing something? I'm using all the common tags like table, thead, th, tbody, tr, td. – Leandro Faria Dec 23 '14 at 13:41
  • I'm speculating here, but it might be that you need a border in order to use border-radius, and if that's the case try adding a transparent border to your table or rows. – Waxi Dec 23 '14 at 13:51
1

Use this CSS code to round the corners:

.table-bordered {
  border-radius: 5px;
}
Ian Hazzard
  • 7,661
  • 7
  • 34
  • 60
-1

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>
Sleek Geek
  • 4,638
  • 3
  • 27
  • 42