table border html

Question

Hi All,

I am creating a bunch of tables now as and when I add table header (<th>)table row <tr> and add border to it there are multiple borders coming up. I mean say i have two table headers in a row so each and every th tag will add its own border but i just want want border between the two table header's (th).

Thanks

Answer 1

Set border-collapse:collapse for both table and th in your CSS:

table, th, td { border-collapse:collapse }

Answer 2

Your problem description is vague (in the future, please come up with an SSCCE, so that everyone can just copy'n'paste'n'run it to see what you exactly mean), but at least, a common solution to this "double border" problem is to add border-collapse: collapse property to the parent table in question:

table {
    border-collapse: collapse;
}

Also see this Quirksmode article for several examples.

Answer 3

If you are guaranteed to have 2 and only 2 th columns, and if I'm reading your question right that you just want a border between the two (i.e. in the middle of the two th tags), then just apply a border-right to the left th:

table
{
   border-collapse: collapse;
}
th.leftColumn
{
   border-right:1px solid #000;
}

Markup

<table>
   <tr>
      <th class="leftColumn">&nbsp;</th>
      <th>&nbsp;</th>
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
</table>

It's quick and dirty, but if you know you have only 2 columns it would work. Again this is assuming your question is that you want a border between two th cells, and nowhere else.