HTML Table Border: User Agent style sheet overrides CSS? - html

Question

I have an HTML table that needs its border color changed. I can't figure it out.
HTML
<table>
<thead>
<tr>
<th>Name</th>
<th>Conditions</th>
<th>Characteristics</th>
</tr>
</thead>
<tbody>
<tr class="zebra-stripe">
<td class="first-field">Element</td>
<td>version}</td>
<td></td>
</tr>
<tr>
<td class="first-field">ApplicationTransactionID</td>
<td>string, up to 64 chars, Optional</td>
<td>A number assigned by the calling application to uniquely identify this request.</td>
</tr>
</tbody>
</table>
CSS
/* Global CSS */
table {
border-color: red;
}
tr {
border-color: red;
}
td {
border-color: red;
/* Table CSS */
.zebra-stripe {
border-color: red;
background: #002D38;
border: solid;
border-width: 1px;
}
.zebra-stripe table {
border-color: red;
}
.zebra-stripe tr {
border-color: red;
}
.zebra-stripe td {
border-color: red;
}
I have even tried to change the border color with an inline style. Still no luck! It doesn't work in Chrome or Safari. The border is simply just gray and its from the user agent style sheet. Am I wrongly targeting it? I targeted it like 10 different ways. The class CSS should be enough. I can change the border style or the border width just fine, but I can't change the color. But at the most, targeting the table row should be enough as well.
Cannot fathom what is going wrong.

Answer 1

you haven't defined the rest of the border attributes. You can use:
table {
border: 1px solid red;
}
(which is border-width, border-style and border-color)
instead of
table {
border-color: red;
}
FIDDLE
Also a note about your current CSS, you have .zebra-stripe added as a class to a tr but the CSS states .zebra-stripe table and .zebra-stripe tr which means it's targeting a table or tr inside of a parent with a class of .zebra-stripe
UPDATE
To explain, there were 2 issues, 1 being you forgot to close this
tr {
border-color: red;
}
td {
border-color: red;
<------ //no '}' tag
this prevented .zebra-stripe from working at all. Secondly, .zebra-stripe had the following issue:
.zebra-stripe
border-color: red;
background: #002D38;
border: solid; <------ this should be 'border-style', 'border' is overwriting the others
border-width: 1px;

Answer 2

Wow many careless mistakes on my part. Was pretty flustered, doing a lot of poking around in the dark to see if something would work.
HTML
<table>
<thead>
<tr>
<th>Name</th>
<th>Conditions</th>
<th>Characteristics</th>
</tr>
</thead>
<tbody>
<tr class="row-edge">
<td class="first-field">Element</td>
<td>version}</td>
<td></td>
</tr>
<tr>
<td class="first-field">ApplicationTransactionID</td>
<td>string, up to 64 chars, Optional</td>
<td>A number assigned by the calling application to uniquely identify this request.</td>
</tr>
</tbody>
</table>
CSS
.row-edge {
border-top: 1px solid #0A454F;
border-bottom: 1px solid #0A454F;
}
Changed a few colors and labels. But this is just what I needed.
Thanks again!