缩放表单元格高度答案

【问题标题】：Scaling table cell height缩放表单元格高度
【发布时间】：2013-09-08 13:42:47
【问题描述】：

首先，这是一个重复的问题：Equal-height scaling cells in an html table

提出上述问题的用户没有得到与我遇到的相同问题的解决方案。

在JSFIDDLE 中，您会注意到一个带有红色背景的单元格。此单元格是最高，我需要所有其他单元格拾取最高单元格高度并跨越到相应的单元格高度。

解决方案不能包含固定高度，因为这必须是动态的

这是我想要实现的目标的模型：http://jsfiddle.net/pAz6G/

这里是 HTML：

<table class="left" cellspacing="0" borderspacing="0" >
    <tr>
        <td>            
            <h2>Very Servere</h2>
            <p>50m from high water on East Coast, 100m from high water on West Coast. Characterised by:</p>
            <ul>
                <li>Heavy salt deposits</li>
                <li>The almost constant smell of saly spray in the air.</li>
                <li>Close to breaking stuff (typically starts 50-100 metres) such as is found on exposed coasts.</li>
            </ul>
            <p>This environment may be extended inland by revailing winds and local coniditions</p>         
        </td>
    </tr>
</table>
<table cellspacing="0" borderspacing="0" class="right">
    <tr>
        <td class="section">
            <span class="section-heading">Applications</span>
            <table class="inner">
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
            </table>
        </td>
        <td class="section">
            <span class="section-heading">Applications</span>
            <table class="inner">
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
            </table>
        </td>
        <td class="section">
            <span class="section-heading">Applications</span>
            <table class="inner">
                <tr>
                    <td>Roofing</td>
                </tr>
                <tr>
                    <td class="red">Rain washing plus manual washing every 3 months</td>
                </tr>
                <tr>
                    <td>Roofing</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这里是 CSS：

/* Column Styling */

.left {
    float: left;
    width: 350px;
}

    .left td {
        padding: 10px;
    }

.right {
    float: left;
    width: 400px;
}
/*********************************************/

/* General Styling */

.no-padding {
    padding: 0;
}

td {
    background: grey;
    color: white;
    vertical-align: top;
}

p {
    margin: 0;
}

.red {
    background: red;
}

/*********************************************/

/* Section Styling */

.section {
    border-left: 1px solid #fff;
}

.section-heading {
    display: block;
    padding: 10px;
}

/*********************************************/

/* Nested Tables */

.inner {
    width: 100%;
}

.inner td {
    border-top: 1px solid #fff;
    padding: 10px;
}

/*********************************************/

【问题讨论】：

我已经和我的同事进一步审查了这一点，并提出了一个解决方案。完成后，我将发布一个可行的解决方案。我们的想法是需要相同高度的单元格 - 它们需要在同一个表格上下文中 - 目前它们是独立的，因此无法获取彼此的单元格高度。

标签： html css html-table cell scaling

【解决方案1】：

不要使用多个表，而是尝试使用一个表。

保持简单:)

【讨论】：