TH not overriding table border (CSS+HTML) - html

Question

I want the headings of the table to have a red solid border and the rest of the table a dotted black border.
Using the code below, all is correct but the left and right side of the TH being black dotted. Is there any way to override the <table> borders within a TH style declaration?
This is what I want to achieve:
<style type="text/css">
table {
border-style:none dotted dotted dotted;
border-collapse: collapse;
}
table th {
border: 2px solid red;
}
</style>
<table >
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>

Answer 1

A simple solution is to set the th border width equal to or larger than the table border width, if this is acceptable. For example, add
table { border-width: 2px; }
to make them equal. In your example, the width is the initial value, medium, which normally maps to 3px or 4px in browsers.
Otherwise, a different strategy is needed (see Zolthan Toth’s answer), a strategy where no left or right border is set on the table element.
The reason is that according to the [border conflict resolution][1] rules, the wider border wins (and for equal-width borders, solid beats dotted).

Answer 2

Try this - http://jsfiddle.net/eaTLp/
table {
border-style:none none dotted;
border-collapse: collapse;
}
table th {
border: 2px solid red;
}
table td:first-child {
border-left: dotted;
}
table td:last-child {
border-right: dotted;
}
​
You're giving the dotted border only to the bottom of the table. On the left and right you're selecting the first and last <td> in every row by :first-child and :last-child and assign them the left and right border respectively.