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