3

次のようなスパンされた行を持つテーブルがあります。

+----------+---------+
| Spanned  |  Row A  |
| row      |         |
| (several +---------+
| lines of |  Row B  |
| text)    |         |
+----------+---------+

行 A と行 B のコンテンツは垂直方向に上揃えされますが、行も垂直方向に均等に分散されて、スパンされた行と同じ高さになります。結果を次のようにしたい:

+----------+---------+
| Spanned  |  Row A  |
| row      +---------+
| (several |  Row B  |
| lines of |         |
| text)    |         |
+----------+---------+

つまり、行 A をできるだけ小さくし、行 B のみを垂直方向に拡張する必要があります。これはできますか？min-height など、CSS を使用してさまざまなスタイリングを試みましたが、行は常に均等に分散されているようです。実際には、A と B よりも多くの行があり、最後の行だけを実際のコンテンツを超えて垂直方向に拡張したいと考えています。どの行のコンテンツの実際の量も予測できないため、高さを明示的に設定してもうまくいきません。

4

3 に答える 3

2

HTMLマークアップがないと答えるのは少し難しいです。ただし、必要な動作は Chrome のデフォルトの動作のようです。

行に固定の高さを設定し、最後の行を「自動」に設定して、テーブルの残りの高さを埋める必要があります。

Firefox の場合、次のコードを使用しました。

<html>
    <head>
        <style type="text/css">
        table td {
            border: 1px solid black;
            width: 200px;
            vertical-align: top;
        }

        table tr {
            height: 1.2em;
        }

        table tr.last {
            height: auto;
        }

        </style>
    </head>
    <body>
        <table>
            <tr>
            <td rowspan="2">Several lines of text. Lorem ipsumLorem ipsum dolor sit amet, consectetur     adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                <td>Line A</td> 
            </tr>
            <tr class="last">
                <td>Line B</td>
            </tr>
        </table>
    </body>
</html>

サポートしたいブラウザーによっては、私が使用した「最後の」クラスの代わりに CSS 疑似クラスを使用できることに注意してください。

于 2013-09-11T13:34:03.503 に答える
1

CSS仕様によると：

CSS 2.1 では、複数の行にまたがるセルが行の高さの計算にどのように影響するかを指定していませんが、関連する行の高さの合計が、行にまたがるセルを囲むのに十分な大きさでなければなりません。

参照: http://www.w3.org/TR/CSS2/tables.html#height-layout

ただし、次のようなものに近づくことができます。

たとえば、4 行のテーブルがある場合:

<table>
    <tr>
        <td rowspan="4">The left stuff...</td>
        <td >Row A and some more text for demo.</td>
    </tr>
    <tr>
        <td >Row B</td>
    </tr>
    <tr>
        <td >Row C</td>
    </tr>
    <tr>
        <td class="last">Row D</td>
    </tr>
</table>

次の CSS を適用します。

table {
    border: 1px dotted blue;
    width: 300px;
    table-layout: fixed;
}
td {
    vertical-align: top;
    height: 10px;
}
td.last {
    background-color: beige;
    height: auto;
}

td高さの長さの値を小さく設定します。表のセルは高さの値を最小値として扱うため、小さな値は縮小して合わせる効果を模倣します。

最後の (一番下の) テーブル セルの場合、height: autoこれを設定すると、セルの高さが拡張されます。CSS 仕様からは、これが機能することは明らかではなく、結果はブラウザーに依存する可能性があります。(私は Firefox でテストしました。)

デモを参照してください: http://jsfiddle.net/audetwebdesign/jrCHj/

于 2013-09-11T13:34:06.510 に答える