0

次の HTML テーブルがあり、いくつかの問題があります。まず、テーブルの行が非常に大きいため、テーブルの行は、その中にコンテンツが収まるだけの大きさでなければなりません。2番目の内側のdivのいくつかは、行の残りのdiv、特に2行目に折り返される単語を含むものと一致していません

    <!DOCTYPE html>
<html>
<head>
    <style>
        .stopHoriz {
            display:inline-block; 
            border: 1px solid black; 
            width:75px; 
            height:75px; 
            text-align:center;
            font-size: .8em;
        }

        .stopVertical {
            margin-bottom:3px;
            border: 1px solid black; 
            width:75px; 
            height:75px; 
            text-align:center;
            font-size: .8em;
        }
    </style>
</head>
<body>

    <table border="1">
        <tr style="height:75px">
            <td colspan="2">
                <div style="padding-right: 30px; vertical-align:top">
                    <div class="stopHoriz">Amusement</div>
                    <div class="stopHoriz">State Park</div>
                    <div class="stopHoriz">Zoo</div>
                    <div class="stopHoriz">History</div>
                    <div class="stopHoriz">Marine Encounters</div>
                    <div class="stopHoriz">Onset</div>
                    <div class="stopHoriz">Museum</div>
                    <div class="stopHoriz">Beaches</div>
                </div>
            </td>
            <td rowspan="2" style="width:75px">
                <div style="padding-bottom: 30px; vertical-align:top">
                    <div class="stopVertical">Amusement</div>
                    <div class="stopVertical">State Park</div>
                    <div class="stopVertical">Zoo</div>
                    <div class="stopVertical">History</div>
                    <div class="stopVertical">Marine Encounters</div>
                    <div class="stopVertical">Onset</div>
                    <div class="stopVertical">Museum</div>
                    <div class="stopVertical">Beaches</div>
                </div>
            </td>
        </tr>
        <tr>
            <td rowspan="2" style="width:75px;">
                <div style="padding-top: 30px">
                    <div class="stopVertical">Beaches</div>
                    <div class="stopVertical">Museum</div>
                    <div class="stopVertical">Onset</div>
                    <div class="stopVertical">Marine Encounters</div>
                    <div class="stopVertical">History</div>
                    <div class="stopVertical">Zoo</div>
                    <div class="stopVertical">State Park</div>
                    <div class="stopVertical">Amusement</div>
                </div>              
            </td>
            <td>Main</td>
        </tr>
        <tr style="height:75px">
            <td colspan="2">
                <div style="padding-left: 30px">
                    <div class="stopHoriz">Beaches</div>
                    <div class="stopHoriz">Museum</div>
                    <div class="stopHoriz">Onset</div>
                    <div class="stopHoriz">Marine Encounters</div>
                    <div class="stopHoriz">History</div>
                    <div class="stopHoriz">Zoo</div>
                    <div class="stopHoriz">State Park</div>
                    <div class="stopHoriz">Amusement</div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
4

1 に答える 1