0

我有以下 HTML 表格，但它存在一些问题。首先，表格中的行非常大，表格行应该足够大以容纳其中的内容。其次，一些内部 div 与行中的其余 div 不一致，特别是那些包含换行到第二行的单词的 div

    <!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

0

我想出了答案。行跨度导致了问题，我不得不删除行跨度并在第二行上使用负边距。

    <!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>
        </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>
            <td style="width:75px">
                <div style="padding-bottom: 30px; vertical-align:top; margin-top: -83px">
                    <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 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>
于 2013-07-28T14:53:36.727 回答