0

I'm trying to style a table and the border isn't showing up. This has never happened to me before, so I'm not sure what to do.

Here's my table:

<table class="table">
  <thead>
    <tr>
      <th>Dessert (100g serving)</th>
      <th>Calories</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dessert (100g serving)</td>
      <td>Calories</td>
    </tr>
  </tbody>
</table>

And here's my less:

@dark-text: rgba(0,0,0,0.87);
@dark-text-secondary: rgba(0,0,0,0.54);
@dark-text-disabled: rgba(0,0,0,0.26);

.table {
    z-index: 10;

    thead {
        tr {
            border-bottom: 3px solid @dark-text-disabled;
            z-index: 10;

            th {
                color: @dark-text-secondary;
                z-index: 10;
            }
        }
    }

    tbody {
        tr {
            border-bottom: 3px solid @dark-text-disabled;
            z-index: 10;

            td {
                z-index: 10;
            }
        }
    }
}

http://codepen.io/anon/pen/JdOaVO

user3720306
  • 51
  • 1
  • 9
  • I believe you should style the `td` instead of the `tr`, then `border-collapse: collapse` to get rid of the gaps between rows. – Huey Jun 25 '15 at 02:58
  • @Huey If I use Inspect Element in Chrome I can see the highlight of the border, but I can't see it otherwise. – user3720306 Jun 25 '15 at 03:01
  • 2
    possible duplicate of [Border around tr element doesn't show?](http://stackoverflow.com/questions/18679020/border-around-tr-element-doesnt-show) – Stickers Jun 25 '15 at 03:04

1 Answers1

5

Either move the border-bottom rule to the th and td tags or use collapsing border model (border-collapse: collapse;) for the .table

.table {
    border-collapse: collapse;
}

http://codepen.io/anon/pen/BNmOgg

ET-CS
  • 6,334
  • 5
  • 43
  • 73