Question

我想显示4或5个框（变化）占据页面宽度的100％，因此它将跨越页面的开头到结尾。并希望高度只是为了适合内容。

我正在尝试使用表格，因此它将为每个框分配宽度并填满整行。

下面的代码问题是td中的所有div都居中并且没有相同的高度。尝试了所有我能想到的但它不起作用。尝试垂直对齐，高度为100％.....

如何让td中的所有div具有相同的高度？

如果还有其他方法可以这样做，请告诉我。我是html假人，所以可能没有使用正确的东西。

<table style="width: 100%; text-align:justify;">
    <tr>
        <td>
            <div style="margin-right:15px; background-color:Gray">
                 Some text here
            </div>
        </td>
        <td>
            <div style="margin-right: 15px; background-color:Gray">
                column 2 text here
            </div>
        </td>
        <td>
            <div style="margin-right: 15px; background-color:Gray">
                Column 3 text here
            </div>
        </td>
        <td>
            <div style="background-color:Gray">
                Last column text here
            </div>
        </td>
    </tr>
</table>

Answer 1

就像我告诉了很多其他人一样，你不应该在表格单元格中使用分区。

这将达到完全相同的效果，没有划分：

<table style="width: 100%; text-align: justify;">
    <tr>
        <td style="margin-right: 15px; background-color: gray;">
            Some text here
        </td>
        <td style="margin-right: 15px; background-color: gray;">
            column 2 text here
        </td>
        <td style="margin-right: 15px; background-color: gray;">
            Column 3 text here
        </td>
        <td style="background-color: gray;">
            Last column text here
        </td>
    </tr>
</table>

Answer 2

如果您摆脱了div并将样式和内容直接应用于表格单元格，您将获得所需的效果。

Answer 3

如果在td中没有使用div标签的特殊目的。我会在没有div的情况下做到这一点。添加样式到td标记。

Answer 4

Mamu，我建议您不要使用内联样式元素。而不是为您的表格标签设置样式会更有效，而且最好在<head>标记之间添加以下内容：

<style type="text/css">
table    {width:100%; text-align:justify;}
table td {margin-right:15px; background-color:gray;}
</style>

只使用这两行代码，您可以在整个网站上一致地应用相同的元素。如果您只想将它们应用于某些元素，则可以通过添加“。”来创建类。到您选择的名称：

<style type="text/css">
.MyTable    {width:100%; text-align:justify;}
.MyTable td {margin-right:15px; background-color:gray;}
</style>

并在HTML中添加以下内容：

<table class="MyTable">

请注意，类名区分大小写。但是这个可重用的代码效率更高。

此外，我建议只有在您提供表格数据时才考虑使用表格。表加载速度较慢，而且不是SEO友好。将它们用于布局在语义上是不正确的。您应尽可能将内容与演示文稿分开，如果是布局，则建议您使用div和其他元素。

Html表如何使所有列的高度相同

4 个答案: