Question

Border ALL the things!

I’m writing a HTML table and I’m getting extremely strange behavior. I expected to see all of my cells have a border, but that’s not the case in Firefox.

I’m getting this:

<style>
.speciestable{ border:1px solid black;} 
.speciestable td{border:1px solid #555; vertical-align:top; text-align:center; }
</style>

<table class="speciestable">
<tr>
    <td rowspan="3">LEFT</td>
    <td>1</td>
    <td>2</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
</tr>
<tr>
    <td colspan="2">Bottom</td>
</tr>
</table>

What’s going on? Am I doing something wrong? Why don’t all my cells have borders?

Answer 1

OOPS. I’m a moron. I had some conflicting syles in my external CSS that were removing the borders.

External.css
.tborder tr td:first-child{ border-width:0px; }

I realized that the HTML was actually this:

<table class="tborder>
<tr><td>
    ...
    <table class="speciestable">