g3mini g3mini - 27 days ago 5
CSS Question

css border not showing but css is applied

I'm trying to apply a border to all

tr
's in a
thead
.

Css(stylus):

table
thead
tr
border: solid #000;
border-width: 0 10px;


According to chrome the styles get applied, but the border doesn't actually show up:
enter image description here

Answer

tr need its table to have border-collapse: collapse for border to work

table.first {
    border-collapse: separate;     /*  property default  */
}
table.second {
    border-collapse: collapse;
}

table thead tr {
    border-bottom: 2px solid gray;
}

/*  for this demo only  */
div {
  margin: 25px 20px 10px;
  text-decoration: underline;
}
<div>This table's tr (in thead) has no border</div>

<table class="first">
  <thead>
    <tr>
      <td>Left Head</td>
      <td>Right Head</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Left</td>
      <td>Right</td>
    </tr>
  </tbody>
</table>

<div>This table's tr (in thead) has border</div>

<table class="second">
  <thead>
    <tr>
      <td>Left Head</td>
      <td>Right Head</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Left</td>
      <td>Right</td>
    </tr>
  </tbody>
</table>