2

I just started learning HTML and CSS on my own and getting a hang of general rules and it's becoming easier but this one I can't wrap my head around. I wrote this just to get a hang of tables and rows but the border property is not applied unless I use

.city th {

but the background property and color is applied even with just 

.city {

This is the basic code I wrote and was wondering if there was something simple I missed or something I am not understanding correctly.

<head>
<style>
.even {
background-color: blue;
}
.city th {  
border-top: 5px solid red;
border-top-left-radius: 5px;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<h1>Poetry Workshops</h1>
<p>We will be conducting a number of poetry workshops and symposiums
        throughout the year.</p>
<p>Please note that the following events are free to members:</p>
<div class="list">
<ul>
    <li>A poetic Perspective</li>
    <li>Walt WHitman at War</li>
    <li>Found Poems and Outsider Poetry</li>
</ul>
</div>
<table>
<tr class="city">
    <th></th>
    <th>New York</th>
    <th>Chicago</th>
    <th>San Francisco</th>
</tr>
<tr>
    <td>A poetic perspective</td>
    <td>Sat, 4 Feb 2012 11am - 2pm</td>
    <td>Sat, 3 Mar 2012 11am - 2pm</td>
    <td>Sat, 17 Mar 2012 11am - 2pm</td>
</tr>
<tr class="even">
    <td>Walt Whitman at War </td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
</tr>
<tr>
    <td>Found Poems & Outsider Poetry</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
</tr>
<tr class="even">
    <td>Natural Death: An Exploration</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
    <td>Sat, 7 Apr 2012 11am - 1pm</td>
</tr>
</table>
user47301
  • 21
  • 2

2 Answers2

1

Well you can't give border-color to row but:

You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table. The net effect anyway is that you get separated borders on almost all browsers unless you explicitly specify collapse.)

Reference

Thus, you need to use collapsing borders. Example:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

Also check this workaround Demo

Ref For this jsfiddle

Fore More detail, you can read Here

Community
  • 1
  • 1
Leo the lion
  • 3,164
  • 2
  • 22
  • 40
-1

If you add reset css everything works perfectly.

 html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
guvenckardas
  • 738
  • 4
  • 8