0

首先，这是一个重复的问题：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;
}

/*********************************************/
4

1 回答 1

1

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

保持简单:)

于 2013-09-04T21:59:03.600 回答