Question

我用HTML制作了一个2乘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>

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

Answer 2

对于height，您应该使用100%中的.building来获得相同高度的所有td。见fiddle。虽然，我不知道到底应该是什么样子。

我的表格大小随内容而变化

2 个答案: