Why is there a border showing on my table?

Question

I have a simple table created with html/css:

<div id="test">
    <table class="test-table">
        <tbody>
        <tr class="test-header">
            <td>
                <label>Name</label>
                <div>Bob</div>
            </td>
            <td class="middle-cell">
                <label>Number</label>
                <div>1</div>
            </td>
            <td>
                <label>Date</label>
                <div>Today</div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

And I have some simple css

.xxxxx > th, tr, td {
    border: 1px solid black;
}

This is showing the border on my table, even though there isn't a class xxxxx in my html. How and why is this showing? If I wanted to scope the border to the th, tr, and td in this specific table, how would I do that?

this might be helpful https://stackoverflow.com/a/1139781/3569921 — marcusshep, Aug 29 '17 at 17:51
Possible duplicate of [What do commas and spaces in multiple classes mean in CSS?](https://stackoverflow.com/questions/3344284/what-do-commas-and-spaces-in-multiple-classes-mean-in-css) — Ivar, Aug 29 '17 at 17:54

Naren Murali · Accepted Answer · 2017-08-29T18:04:15.620

The CSS should be like shown below.

Reason:

You are using grouping selectors (You can apply a style to many selectors if you like. Just separate the selectors with a comma), but its doesn't work like grouping all the children of a parent selector (.class > a, p, br) but it should be like (.class > a, .class > p, .class > br)

.xxxxx > tr, .xxxxx > td {
    border: 1px solid black;
}

<div id="test">
    <table class="test-table">
        <tbody>
        <tr class="test-header">
            <td>
                <label>Name</label>
                <div>Bob</div>
            </td>
            <td class="middle-cell">
                <label>Number</label>
                <div>1</div>
            </td>
            <td>
                <label>Date</label>
                <div>Today</div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

You get the same result if you just remove tr and td in your child selector since you don't define a th in your code displayed. — Ragxion, Aug 29 '17 at 18:03

Why is there a border showing on my table?

1 Answers1