CODEWITHSUNDEEP
htmlcsshtml-table
kjkjl
kjkjl

Reputation: 147

Table border html

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).

<table>
    <th>Header1</th>
    <th>Header2</th>
    <tr><td>Data1</td><td>Data2</td> </tr>
</table>

If you refer the above code and if I add borders to say th tag there will be 2 borders between header1 and header2. I just want 1.

Upvotes: 0

Views: 547

Answers (3)

KP.
KP.

Reputation: 13720

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.

Upvotes: 0

BalusC
BalusC

Reputation: 1109695

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.

Upvotes: 2

ЯegDwight
ЯegDwight

Reputation: 25257

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

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

Upvotes: 1

Related Questions