cstickman
cstickman

Reputation: 7

CSS within <DIV> Tags

I am taking an online course and learning javascript, html5 and CSS. I am having an issue with getting my table to be formatted with my css file. It is inside a DIV tag:

<div data-role="main" class="ui-content">

I am trying to do with my CSS:

table th, td { border: 1px solid black;}

And I tried doing .ui-content table th, td {} and nothing and I tried a few others, but I am still stuck with it. Any help would be greatly appreciated. Thanks

Upvotes: 0

Views: 142

Answers (2)

Loupewpew
Loupewpew

Reputation: 21

When have space between element you are targeting children of that element while when you have commas you are targeting multiple elements.

In your case to be able to apply a border to the th, td and table you would need to do:

table, th, td { border: 1px solid black;}

But if you want to apply the css to the th and td inside of a table element you would need to do

table td { border: 1px solid black;}
table th { border: 1px solid black;}

With the html you have

<div data-role="main" class="ui-content">
    <table>
        <tr>
          <th>Grade</th>
          <th>Numeric Equivalent</th>
          <th>Explanation</th>
        </tr>
        <tr>
          <td>A</td>
          <td>95-100</td>
          <td><strong>Excellent.</strong></td>
        </tr>
    </table>
</div>

Your css should be

table { border-collapse: collapse; }
table th { border: 1px solid black; }
table td { border: 1px solid black; }

Upvotes: 2

Bharat
Bharat

Reputation: 1205

Here's vary basic sample, now may be tell what's the problem

table, th, td { border: 1px solid black;}
<table>
    <tr>
        <th>
            Header 1
        </th>
        <th>
            Header 2
        </th>
    </tr>
    <tr>
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
    </tr>
    <tr>
        <td>
            Data 1
        </td>
        <td>
            Data 2
        </td>
    </tr>
</table>

Upvotes: 1

Related Questions