child selector rule in table/html

user_13495559 0
Viewed 67

▸ To achieve the proper layout for the direction letters and bidirectional arrows, use the CSS display property with table values. And for the table rows and cells, use CSS child selector rules, not class selector rules.

I wrote Html with div/row class but have to use child selector.How to change and no rewrite everything.Honestly even don't know how.This table has no border and in row date letters and images with arrow.I am just started to study html/css/js. here is my html thank you

<div class="Heading">
    <div class="Cell">
        <p class="diagonal"><img src="dablearow.png";></p>
    </div>
    <div class="Cell">
        <h2>E</h2>
    </div>
    <div class="Cell">
        <p></p>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <h2>S</h2>
    </div>
    <div class="Cell">
        <p><img src="dablearow.png" ></p>
    </div>
    <div class="Cell">
        <h2>N</h2>
    </div>
</div>
<div class="Row">
    <div class="Cell">
        <p></p>
    </div>
    <div class="Cell">
        <h2>W</h2>
    </div>
    <div class="Cell">
        <p class="diagonal"><img src="dablearow.png"></p>
    </div>
</div>
selector css html
2 Answers

I think you want this

.table{
   display: table;
}
.table > div{
 display: table-row;
}
.table > div > div{
 display: table-cell;
 width: 100px;
}
<div class="table">
<div>
    <div>
        <p class="diagonal"><img src="dablearow.png";></p>
    </div>
    <div>
        <h2>E</h2>
    </div>
    <div>
        <p></p>
    </div>
</div>
<div>
    <div>
        <h2>S</h2>
    </div>
    <div>
        <p><img src="dablearow.png" ></p>
    </div>
    <div>
        <h2>N</h2>
    </div>
</div>
<div>
    <div>
        <p></p>
    </div>
    <div>
        <h2>W</h2>
    </div>
    <div>
        <p class="diagonal"><img src="dablearow.png"></p>
    </div>
</div>
</div>

user_88640930

Just use a table using the "table" tag.It would be much better.You won't need to make that div.Just a suggestion.Also use "td" for cells in the angled brackets with "th" for headers in table.All in quotation marks are supposed to be in angled brackets:<>

Admin1
Related