CODEWITHSUNDEEP
htmlcsshtml-tableborder
Gotenks
Gotenks

Reputation: 377

TH not overriding table border (CSS+HTML)

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:

http://s13.postimage.org/5bboz4vef/target.png

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

Upvotes: 0

Views: 9117

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

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

Upvotes: 3

Zoltan Toth
Zoltan Toth

Reputation: 47657

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.

Upvotes: 0

Related Questions