Question

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

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

Answer 1

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

保持简单：）

缩放表格单元格高度

1 个答案: