Html 如何控制表格行的高度_Html_Html Table

Html 如何控制表格行的高度

html

Html 如何控制表格行的高度,html,html-table,Html,Html Table,我有下面的HTML表，它有几个问题。首先，表中的行非常大，表中的行应该足够大以容纳其中的内容。第二，一些内部div与行中的其他div不一致，特别是那些包含换行单词的div <!DOCTYPE html> <html> <head> <style> .stopHoriz { display:inline-block; border: 1px solid black;

我有下面的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>


斯托普霍里斯先生{
显示：内联块；
边框：1px纯黑；
宽度：75px；
高度：75px；
文本对齐：居中；
字体大小：.8em；
}
.垂直停车{
利润底部：3倍；
边框：1px纯黑；
宽度：75px；
高度：75px；
文本对齐：居中；
字体大小：.8em；
}
娱乐
州立公园
动物园
历史
海上遭遇战
开端
博物馆
海滩
娱乐
州立公园
动物园
历史
海上遭遇战
开端
博物馆
海滩
海滩
博物馆
开端
海上遭遇战
历史
动物园
州立公园
娱乐
主要
海滩
博物馆
开端
海上遭遇战
历史
动物园
州立公园
娱乐

我找到了答案。行间距是问题的根源，我必须删除行间距，并在第二行使用负边距

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


斯托普霍里斯先生{
显示：内联块；
边框：1px纯黑；
宽度：75px；
高度：75px；
文本对齐：居中；
字体大小：.8em；
}
.垂直停车{
利润底部：3倍；
边框：1px纯黑；
宽度：75px；
高度：75px；
文本对齐：居中；
字体大小：.8em；
}
娱乐
州立公园
动物园
历史
海上遭遇战
开端
博物馆
海滩
海滩
博物馆
开端
海上遭遇战
历史
动物园
州立公园
娱乐
主要
娱乐
州立公园
动物园
历史
海上遭遇战
开端
博物馆
海滩
海滩
博物馆
开端
海上遭遇战
历史
动物园
州立公园
娱乐

对不起，您能详细介绍一下您遇到的第一个问题吗？如果您查看此表，您会发现第一列非常高。中间有一堆盒子。我希望第一行的高度仅与内框的高度相同。