18

これは、「修正を手伝って」という質問ではなく、「なぜ機能しないのか教えてください」という質問です。テーブル内のtheadまたはtr要素にパディングを適用しようとすると、機能しません。パディングが機能する唯一の方法は、thまたはtd要素に直接適用する場合です。なんでそうなの？theadまたはtr全体にパディングを適用する簡単な方法はありますか、それともthとtdに追加するのが唯一のオプションですか？

<table>
    <thead>
        <tr>
            <th>Destination</th>
            <th>Size</th>
            <th>Home Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>test 1</td>
            <td>test 2</td>
            <td>test 3</td>
        </tr>
    </tbody>
</table>

theadの10pxのパディングに注目してください。

table {
    width: 100%;
}

thead {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}

http://jsfiddle.net/5VQB7/

4

7 に答える 7

25

http://www.w3.org/TR/CSS2/box.html#propdef-padding

「パディング」

適用対象： table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-columnを除くすべての要素

于 2013-03-24T06:57:39.513 に答える
5

th代わりに、要素にパディングを配置してみてください。通常、状況に応じて、thまたは要素にパディングを追加します。td

thead th {
  padding: 10px;
}
于 2013-03-24T06:54:57.223 に答える
4

CSS2.1の関連部分：テーブル

この図を見てください：テーブルレイヤー。全体またはセルafaikにpaddingのみ適用できます。また忘れないでください。他のレイヤーは、さまざまなテーブルレイアウトアルゴリズムで十分に複雑であるため、パディングが適用されていません^^tablethtdcaption

これがフィドルhttp://jsfiddle.net/QB97d/1/で、遊ぶことができる他のプロパティを示しています。

  • border-spacing: 8px 10px;テーブルの各セルの周りの余白のようなものです。でそれを取り除くborder-collapse: collapse;
  • table-layout: fixed;完全に異なるアルゴリズムをトリガーします（「私が言うように幅をレンダリングします。各セルのコンテンツの相対的な量はもう気にしません」）
  • border要素の周りにスペースを与える別の方法ですpadding
  • empty-cells: hide特別な動作を引き起こす可能性があります

このフィドルには表示されていません：

  • セレクターで遊んで、IE9 +のテーブルの4つのコーナーを選択し、各コーナーにthead要素と不明なタイプのセルを選択します（4つのエッジを見つけます;））：

    • thead th:first-child, thead td:first-child、
    • thead th:last-child, thead td:last-child、
    • tbody:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child
    • tbody:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child

  • box-sizing: border-box（およびそのベンダープレフィックス）パディングと境界線の幅を考慮してセルの幅を計算するため（IE6がQuirksモードで行ったように、皮肉なことに...）

于 2013-03-24T09:48:26.493 に答える
3

theadとの間のパディングtbody

残念ながら、パディングは、、theadまたはでは使用できtbodyませんtr。

それでも、テーブル本体の最初の行のデータセルを選択するtheadことで、との間のパディングを増やすtbodyことができます。

tbody tr:first-child td {
    padding-top: 2.5ex;
}

そうすることで、ヘッダー境界の相対位置が保持されます。

于 2020-08-23T10:25:45.867 に答える
1

theadでcssを適用する必要がある場合、theadはcss属性「padding」をサポートしていません。cssは次のように変更します。

thead tr th {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}

または

th {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}
于 2013-03-24T06:54:54.790 に答える
0

左右のパドリングは、常にtdまたはthでも機能します。

ただし、padding-topとpadding-bottomの場合は、td（またはth）に高さを増やすように要求しています。では、兄弟はどうですか？何が起こると思いますか？

したがって、上部または下部のパディングを機能させるには、セルの行であるその親に適用します。

于 2013-03-24T06:56:35.507 に答える
0

のようなタグは、テーブルにデータを入力するためのものではなく、他の要素を含むためのものです。明確にしましょう：ヘッダーをテーブルに追加する場合は、に挿入しません。代わりに、内部に追加します。同様に、データをテーブル内に入力する場合は、内部に挿入する必要があります。

この答えがあなたの質問を明確にすることを願っています

于 2013-03-24T07:01:58.113 に答える