如何控制表格行的高度

时间：2013-07-28 14:13:36

标签： html html-table

我有以下HTML表格，但有一些问题。首先，表中的行非常大，表行应该足够大，以适应其中的内容。其次，一些内部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>

1 个答案:

答案 0 :(得分：0)

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

    <!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>
相关问题
最新问题