web-dev-qa-db-ja.com

theadとtbodyの間の間隔

次のような単純なhtmlテーブルがあります。

<table>
  <thead>
    <tr><th>Column 1</th><th>Column 2</th></tr>
  </thead>
  <tbody>
    <tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
    <tr class="even"><td>Value 3</td><td>Value 4</td></tr>
    <tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
    <tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
  </tbody>
</table>

そして、私はそれを次のようにスタイルしたいと思います：

  • ボックス影付きのヘッダー行
  • ヘッダー行と最初の本文行の間の空白

Box Shadow on Header + Spacing to Body

私はさまざまなことを試しました：

table {
    /* collapsed, because the bottom shadow on thead tr is hidden otherwise */
    border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr   { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th         { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td  { background-color: orange; }

/* I would like spacing between thead tr and tr.first-row */

tr.first-row {
    /* This doesn't work because of border-collapse */
    /*border-top: 2em solid white;*/
}

tr.first-row td {
    /* This doesn't work because of border-collapse */
    /*border-top: 2em solid white;*/
    /* This doesn't work because of the td background-color */
    /*padding-top: 2em;*/
    /* Margin is not a valid property on table cells */
    /*margin-top: 2em;*/
}

参照： http://labcss.net/#8AVUF

誰も私がこれを行う方法に関するヒントを持っていますか？または、同じ視覚効果（つまり、bod-shadow +スペース）を達成しますか？

csshtml-tablespacing
61
Ben

私はこれにそれを持っていると思う fiddle そして私は yours を更新した：

tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
}

[〜＃〜] edit [〜＃〜]より良くシンプルに：

tbody:before {
    content:"@";
    display:block;
    line-height:10px;
    text-indent:-99999px;
}

このようにテキストは本当に見えません

125
sinsedrix

さらに、Zero-Width Non-Joinerを使用して、sinsedrix CSSを最小化できます。

tbody:before {line-height:1em; content:"\200C"; display:block;}
22
user2718944

これにより、ヘッダーとテーブルコンテンツの間に空白ができます。

thead tr {
  border-bottom: 10px solid white;
}

境界線の色の設定はちょっとしたチート方法ですが、うまく機能します。

フォームの調査では、ボックスの影をテーブルの行に設定することはできませんが、セルをテーブルに設定することはできます。

th {
  box-shadow: 5px 5px 5px 0px #000000 ;
}

（影をどのように表示するかはわかりませんので、上記を調整してください。）

10
ACarter

したがって、box-shadowはtr要素ではうまく機能しません...しかし、擬似コンテンツ要素では機能します。 sinsedrixは私を正しい軌道に乗せてくれました。

table {
    position: relative;
}

td,th {padding: .5em 1em;}

tr.even td { background-color: yellow; }
tr.odd td  { background-color: orange; }

thead th:first-child:before {
    content: "-";

    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;

    box-shadow: 0 1px 10px #000000;
    padding: .75em 0;

    background-color: #ccc;
    color: #ccc;
}

thead th {
    padding-bottom: 2em;
}
6
Ben

これはChrome（私が知らない他のブラウザの場合）で機能しました。

.theTargethead::after
{
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
}

このようなCSSコードは、テーブルのtheadとtbodyの間に空の空白を作成します。背景を透明に設定すると、上記のtr>番目の要素の最初の列に独自の色（この場合は緑色）が表示され、:: after要素の最初の約1 cmも緑色になります。

また、行に「-」記号を使用するcontent : "-";空の文字列 ""の代わりに、印刷されたページをファイル、つまりpdfにエクスポートするときに問題が発生する可能性があります。もちろん、これはパーサー/エクスポーターに依存しています。 PDFエディター（例：MS Word、MS Excel、OpenOffice、LibreOffice、Adobe Acrobat Pro）で開いたエクスポートファイルには、マイナス記号が含まれる場合があります。空の文字列には同じ問題はありません。印刷されたhtmlテーブルがイメージとしてエクスポートされる場合、どちらの場合も問題はありません。何もレンダリングされません。

使用しても問題に気づかなかった

content : "\200C";
5
willy wonka

これはトリックを行う必要があります：

table {
  position: relative;
}
thead th { 
  // your box shadow here
}
tbody td {
  position: relative;
  top: 2rem; // or whatever space you want between the thead th and tbody td
}

そして、これはほとんどのブラウザでニースを再生するはずです。

1
David Gaskin