0

バックグラウンド：

テーブルの列に小さなラベルを付けたいのですが。プロジェクトでHTML5/CSS3の実装された部分をいくつか使用しています。このセクションは、特にモバイルデバイスを対象としています。両方の事実が必ずしも関連しているわけではありませんが、肝心なのは、Internet ExplorerやFirefox（WebKitだけ）をサポートする必要がないということです。

問題

私の現在のCSSアプローチでは、セルの垂直方向のパディングは、列の「値」を含む< span>要素（上/下の余白で設定）から取得されます。display: blockその結果、<span>が空または欠落している（値がない）場合、およびラベルが配置されていない場合、パディングはありません。

「完全な」列は、値がなく、そこにない場合でも、ラベルをどこに配置するかを示す必要が<span>あります。

「ノーブレークスペース」が使えるとは思いますが、絶対に避けたいと思います。

誰かがこれを行うための修正/より良い方法を持っているのだろうか？現在のコードは以下のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
<title>ah</title>
<style>

body {
 width: 320px;
}

/* TABLE */

table { width: 100%; border-collapse: collapse; font-family: arial; }
th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
th:last-child, td:last-child { border-right-width: 1px; }
tr:first-child th { border-top-width: 1px; background: #efefef; }

/* RELEVANT STUFF */

td {
 padding: 3px;
}

td sup {
 display: block;
}

td span {
 display: block;
 margin: 3px 0px;
 text-align: center;
}

</style>
</head>
<body>

<table>
    <tr>
        <th colspan="3">something</th>
    </tr>
    <tr>
        <td><sup>some label</sup><span>any content</span></td>
        <td><sup>some label</sup><span>any content</span></td>
        <td><sup>some label</sup><span></span></td><!-- No content, just a label -->
    </tr>
</table>

</body>
</html>
4

1 に答える 1

1

上記のように、次を使用できます。

td {
 padding: 3px;
 vertical-align:top;
}

非表示の要素でもパディングを正確に保持したい場合は、次を使用して空のスパンにhasLayout属性を強制できます。

td {
 padding: 3px;
  vertical-align:top;
}

td sup {
 display: block;
}

td span {
 display: inline-block;
 margin: 3px 0px;
 text-align: center;
 width:100%;
}

インラインブロックの手法については、CSSで空のインラインボックスを描画するで詳しく説明されていますか？

于 2010-05-24T18:07:52.157 に答える