simple question about css multiple divs

Question

I have the following HTML:

<div class="wall" > 
<table> 
  <tr> 
    <div class="tbr01"><th>Content</th></div> 
    <div class="tbr02"><th>User</th></div> 
    <div class="tbr03"><th>Published</th></div>
  </tr>
</table>
</div>

How do i adjust the width of the th div.tbr01

This is what i've tried in my css file: but i am doing something wrong?

div.wall table tr div.tbr01 th {
    width: 100px;
}

Regards, Thijs

Answer 1

Your HTML is invalid .

You cannot have a <div> as a child of a <tr> or a parent of <th> .

Browsers will perform error recovery in various different ways and often give you a DOM that isn't like you expect (eg by moving all the div elements outside the table).

Get rid of the div elements and apply your styles directly to the table cells.

Answer 2

seems it doesn't like the div... apply the class to the th or use

div.wall table tr th {
    width: 300px;
}

OR

<div class="wall" > 
<table> 
  <tr> 
    <th class="tbr01">Content</th>
    <th class="tbr02">User</th>
    <th class="tbr03">Published</th>
  </tr>
</table>
</div>

div.wall table tr th.tbr01 {
    width: 300px;
}