Is There a Clean Way to Get Borders on a <Tbody /> in Pure CSS

rounding the corners of html table body

If your table is set to border-collapse: separate (the default) then the border radius may, or may not be applied to the <tbody>, depending on the browser; the behaviour is undefined in the specifications.

According to the specs — CSS Backgrounds and Borders Module Level 3 (emphasis mine):

The effect of border-radius on internal table elements is undefined in
CSS3 Backgrounds and Borders, but may be defined in a future
specification. CSS3 UAs should ignore border-radius properties applied
to internal table elements when ‘border-collapse’ is ‘collapse’.

For consistent results, based on your example, you would have to set the tbody to display: block as suggested in this answer. This will break the table behaviour somewhat, but could be useful.

How to add border-radius on tbody element?

You can try using box-shadow along with border-radius.

tbody {  box-shadow: 0 0 0 1px red;  border-radius: 10px;}

<table>  <thead>    <tr>      <td>a</td>      <td>b</td>      <td>c</td>    </tr>  </thead>  <tbody>    <tr>      <td>1</td>      <td>2</td>      <td>3</td>    </tr>  </tbody></table>

How to completely remove borders from HTML table

<table cellspacing="0" cellpadding="0">

And in css:

table {border: none;}

EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.

I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).

I did like this:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>

You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.

Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)

Rounded table corners CSS only

Seems to work fine in FF and Chrome (haven't tested any others) with separate borders: http://jsfiddle.net/7veZQ/3/

Edit: Here's a relatively clean implementation of your sketch:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

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?

I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

    table tr:last-child td:first-child {
        border: 2px solid orange;
        border-bottom-left-radius: 10px;
    }
    
    table tr:last-child td:last-child {
        border: 2px solid green;
        border-bottom-right-radius: 10px;
    }

<table>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        2
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>
        4
      </td>
    </tr>
  </tbody>
</table>

How to make no borders in a td rowspan rows

A better solution would be to move the border-bottom style to the <tr> (instead of <td>) and to use a custom class to specify if your <tr> needs border or not.

See you updated jsfiddle.

CSS added/modified :

/* modified */
#Table td {
/*border-bottom: 1px solid #cccccc;*/
padding-top: 3px;
padding-bottom: 4px;
}

/*added*/
#Table tr{
    border-bottom: 1px solid #CCC;
}
#Table tr.no-border-row {
    border-bottom: none;
}

HTML:

<table id="Table">
    <thead>
        <tr>
            <th>Track</th>
            <th>Car</th>
            <th></th>
            <th>Score</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr class="no-border-row">
            <td rowspan="3">LIST 1</td>
            <td>Name 1</td>
            <td>LT</td>
            <td>59,800</td>
            <td>8 days ago</td>
        </tr>
        <tr class="no-border-row">
            <td>Name 2</td>
            <td>TR</td>
            <td>58,000</td>
            <td>10 days ago</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>SO</td>
            <td>60,000</td>
            <td>8 days ago</td>
        </tr>
        <tr>
            <td>LIST 2</td>
            <td>Name 4</td>
            <td>NL</td>
            <td>60,000</td>
            <td>8 days ago</td>
        </tr>
        <tr>
            <td>LIST 3</td>
            <td>Name 5</td>
            <td>NR</td>
            <td>59,000</td>
            <td>6 days ago</td>
        </tr>
        <tr>
            <td>LIST 4</td>
            <td>Name 6</td>
            <td>FI</td>
            <td>57,000</td>
            <td>1 month ago</td>
        </tr>
    </tbody>
</table>

Firefox 1 pixel bug with border-collapse, workaround?

Remove the border-collapse and use cellspacing=0 instead.

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.

Set your border widths to 10px in your code to see what is really happening.

edit after OP edit

You can use the old table "border" trick. Set the background color on the table. Set the td and th color to white. User cellspacing = 1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>

Insert th in thead

You can do it with vanilla JavaScript. Try this:

HTML

<table id="table">
  <thead>
    <tr>
      <th>First</th>
    </tr>
  <thead>
</table>

JavaScript

var tr = document.getElementById('table').tHead.children[0],
    th = document.createElement('th');
th.innerHTML = "Second";
tr.appendChild(th);

Here is an example http://codepen.io/anon/pen/Bgwuf