如何使所有三个表格都显示在相同的高度答案

【问题标题】：How to make a all the three tables to display at same height如何使所有三个表格都显示在相同的高度
【发布时间】：2014-08-17 19:57:36
【问题描述】：

我有三个表table1，table2，table3都包裹在一个表中，同时向表中添加不同大小的内容，每个表扩展到不同的高度，如何使所有三个表在添加不同大小后显示在相同的高度内容

HTML：

<div class="csdiv">
<table cellpadding="2" cellspacing="0">
    <tr valign="top">
        <td>
            <table class="cstable" width="100%" height="265">
                    <tr height="35">
                        <th width="33%" nowrap>Table1</th>
                    </tr>
                    <tr>
                        <td valign="top" bgcolor="FFFFFF" width="275">


                        </td>
                    </tr>
            </table>
        </td>
        <td>
            <table class="cstable" width="100%" height="265">
                    <tr height="35">
                        <th nowrap width="34%" nowrap>Table2</th>
                    </tr>
                    <tr>
                        <td valign="top" bgcolor="FFFFFF" width="275">

                        </td>
                    </tr>
            </table>
        </td>
        <td>
            <table class="cstable" width="100%" height="265">
                    <tr height="35">
                        <th nowrap width="33%" nowrap>Table3</th>
                    </tr>
                    <tr>
                        <td valign="top" bgcolor="FFFFFF" width="275">


                        </td>
                    </tr>
            </table>
        </td>                                  
    </tr>
</table>
</div>

CSS：

.csdiv {
    font-family: 'Trebuchet MS',Tahoma,Arial,sans-serif;
    font-size: 12px;
    line-height: 1em;
}
.cstable {
    border-collapse: collapse;
    border-color: #666666;
    border-style: solid;
    border-width: 1px;
    font-family: 'Trebuchet MS',Tahoma,Arial,sans-serif;
    font-size: 12px;
    line-height: 1em;
}
.cstable th {
    background-color: #A3C2FF;
    border-collapse: collapse;
    border-color: #666666;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    font-family: 'Trebuchet MS',Tahoma,Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1em;
    text-align: left;
}

JSFIDDLE：DEMO

【问题讨论】：

旁注： 使用 CSS 而不是 bgcolor 属性。另外，使用<br> 或<p> 换行。另外，你的 CSS 很笨拙；考虑使用 CSS 速记。
bgcolor会影响表格高度
不相关。旁注只是您的代码的 cmets。 height、cellpadding 和 cellspacing 也应该避免使用。
如果我可以给你一个建议，尽量不要发布你正在使用的完全相同的代码，因为这很难阅读。滚动数百个 HTML 代码只是为了跳过 repeating 字符的重复行是没有意义的。使用 cmets 或其他方式指出实际内容很长。你也已经有了一个 jsFiddle。
@Aravind30790，假设可以回答您问题的人是专业人士。他们会单独使用 jsFiddle 来处理您的问题，因此（过多）冗长可能会损害您的声誉（通过引起反对票）。我个人不会对这种情况投反对票，除了长代码之外，这个问题实际上很适合 SO，但有些人没有耐心滚动所有这些低谷，这是合理的。如果有不清楚的地方，你最好听听其他用户的 cmets 并相应地改进。删除多余内容的评论在这里不太可能。

标签： html css

【解决方案1】：

您的父元素没有设置height，因此table 的高度仅等于内容。要使其全高，请添加

 html,body{
    height:100%; /*give full height to document */
    width:100%;
    margin:0;
    padding:0;
 }
 table{
    height:100%; /* stretch table to parents height*/
 }

demo

【讨论】：

@Mr.Alien ：我的日子已经过去了......外星人编辑了我的答案......这将是一个地狱般的周末！ :D
+1 - 故事的寓意（对我自己而言）：在刷新页面之前不要输入答案！ :-(
@techfoobar 否则打字太快，你流血了
@techfoobar : 我很少打败外星人......我第一次发生这种情况！！
@Mr.Alien ：哈哈...说起来容易做起来难...我最好关闭我的帐户而不是流血！ :p