html - 我的表格大小随内容变化

Question

我用 HTML 制作了一个 2 x 4 的表格，每个 td 都有一个 div。像这样:

<table id="buildingtable">
                <tr>
                    <td><div class="building">
                        test
                    </div><td>
                    <td><div class="building">
                        test
                    </div><td>
                </tr>
                <tr>
                    <td><div class="building">
                        test
                    </div><td>
                    <td><div class="building">
                        test
                    </div><td>
                </tr>
                <tr>
                    <td><div class="building">
                        test
                    </div><td>
                    <td><div class="building">
                        test
                    </div><td>
                </tr>
                <tr>
                    `<td><div class="building">
                        test
                    </div><td>
                    <td><div class="building">
                        test
                    </div><td>
                </tr>
            </table>

想法是在每个 div 中放一张图片和一点文本 只有文本的表格看起来很好，但是一旦我将图像放入 div 中，它就会更改每个 tr 中每个第一个 td 的大小。它只改变了第一个(所以第一个垂直行)很奇怪。这是我用于表格和 div 的 css:

#buildingtable{
height: 100%;
width: 100%;
margin-left: 1.8%;
margin-top: -1.5%;
}

.building{
    display:block;
    height: 50%;
    max-height: 50%;
    width:80%;
    max-width:80%;
    padding: 5% 7.5%;
    background: #aba000;
    color: #FFF;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 8px #001db0;
    border-style: groove ridge ridge groove;
}

Answer 1

我想这是一个简单的修复，你把你的部门放在了错误的地方。

代替:

<td><div class="building">
                    test
                </div><td>

你为什么不试试:

<div class="building"><td>
                    test
                <td></div>

您需要将表格调整到该宽度而不是文本。