css - テーブル行にマージンを追加する方法

Question

多くの行を含むテーブルがあります。これらの行の一部は、class="highlight"異なるスタイルで強調表示する必要がある行を示しています。私がやろうとしているのは、これらの行の前後に間隔を追加して、他の行からわずかに離れて表示されるようにすることです。

私はこれを成し遂げることができると思いましmargin-top:10px;margin-bottom:10px;たが、それは機能していません。誰もがこれを行う方法を知っていますか、それができるかどうか？これがHTMLで、tbodyの2番目のtrをクラスハイライトに設定しました。

<table>
<thead>
  <tr>
     <th>Header 1</th>
     <th>Header 2</th>
  </tr>
</thead>
<tbody>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr class="highlight">
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
</tbody>
</table>

score 182 · Accepted Answer

テーブルの行にマージン値を設定することはできません。パディングを増やすことはできますか？それはうまくいくでしょう。それ以外の場合は、行の<tr class="spacer"></tr>前後に挿入できます。class="highlighted"

score 180 · Accepted Answer

border-spacingプロパティは、この特定の場合に機能します。

table {
  border-collapse:separate; 
  border-spacing: 0 1em;
}

参照。

score 64 · Accepted Answer

s自体をスタイリングすることはできませんが、このように「ハイライト」saスタイル内にs<tr>を付けることはできます。<td><tr>

tr.highlight td {
  padding-top: 10px; 
  padding-bottom:10px
}

score 34 · Accepted Answer

34

行の高さが可能な解決策になる可能性があります

tr
{
    line-height:30px;
}

于 2014-02-24T21:58:54.673 に答える

score 32 · Accepted Answer

これは完全には完璧ではありませんが、水平方向と垂直方向の境界線の間隔を別々に制御できることを発見してうれしく思います。

table
{
 border-collapse: separate;
 border-spacing: 0 8px;
}

score 28 · Accepted Answer

私はこれがちょっと古いことを知っています、しかし私はちょうど同じ線に沿って何かを働かせました。あなたはこれをすることができませんでしたか？

tr.highlight {
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: transparent;
}

お役に立てれば。

score 28 · Accepted Answer

まず第一に、a<tr>またはaにマージンを入れようとしないでください<td>。これは、最新のレンダリングでは機能しないためです。

解決策1

マージンは機能しませんが、パディングは機能します：

td{
    padding-bottom: 10px;
    padding-top: 10px;
}

警告：これにより、境界線が要素からさらに離れます。境界線が表示されている場合は、代わりにソリューション2を使用することをお勧めします。

解決策2

境界線を要素に近づけてマージンを模倣するには、次のよう<tr>に各リールテーブルの間に別の境界線を配置します。<tr>

<tr style="height: 20px;"> <!-- Mimic the margin -->
</tr>

score 9 · Accepted Answer

marginで無視されるためtr、通常は回避策を使用します。透明border-bottomまたはborder-topを設定し、background-clipプロパティをに設定して、境界線の下にペイントされないようにしますpadding-box。background-color

table {
   border-collapse: collapse; /* [1] */
}

th, td {
  border-bottom: 5px solid transparent; /* [2] */
  background-color: gold; /* [3] */
  background-clip: padding-box; /* [4] */
}

セルが共通の境界線を共有していることを確認しますが、完全にオプションです。ソリューションはそれなしで機能します。
値は、5px達成したいマージンを表します
background-color行/セルのを設定します
background下にペイントされていないことを確認してくださいborder

ここでデモを参照してください：http ：//codepen.io/meodai/pen/MJMVNR？editors = 1100

background-clip最新のすべてのブラウザでサポートされています。（およびIE9 +）

または、を使用することもできますborder-spacing。ただし、これはにborder-collapse設定すると機能しませんcollapse。

score 8 · Accepted Answer

行のマージンを模倣する方法は、疑似セレクターを使用してにスペースを追加することtdです。

.highlight td::before, .highlight td::after
{
  content:"";
  height:10px;
  display:block;
}

このようにして、ハイライトクラスでマークされたものはすべて上下に分離されます。

https://jsfiddle.net/d0zmsrfs/

score 6 · Accepted Answer

tr全体をインデントするためにCSS変換を使用しようとするかもしれません：

tr.indent {
   -webkit-transform: translate(20px,0);
   -moz-transform: translate(20px,0);
}

これは有効な解決策だと思います。私のOSXのFirefox16、Chrome 23、Safari6では問題なく動作するようです。

score 4 · Accepted Answer

これが私がそれをしたきちんとした方法です：

table tr {
    border-bottom: 4px solid;
}

これ4pxにより、各行の間に垂直方向の間隔が追加されます。そして、最後の子にその境界線を付けたくない場合は、次のようにします。

table tr:last-child {
    border-bottom: 0;
}

CSS3疑似セレクターは、selectivizrを使用するIE8以下でのみ機能することに注意してください。

score 4 · Accepted Answer

私はあきらめて、以下のような単純なjQueryコードを挿入しました。私のようなtrが非常に多い場合、これによりすべてのtrの後にtrが追加されます。デモ：https ：//jsfiddle.net/acf9sph6/

<table>
  <tbody>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
  </tbody>
</table>
<script>
$(function () {
       $("tr.my-tr").after('<tr class="tr-spacer"/>');
});
</script>
<style>
.tr-spacer
{
    height: 20px;
}
</style>

score 4 · Accepted Answer

テーブルの行の間に余白の外観を与えるためのハックは、それらに背景と同じ色の境界線を与えることです。これは、HTMLマークアップを変更できないサードパーティのテーマをスタイリングするときに役立ちます。例えば：

tr{ 
    border: 5px solid white;
}

score 3 · Accepted Answer

間隔を追加したいセルにdivを追加します。

<tr class="highlight">
 <td><div>Value1</div></td>
 <td><div>Value2</div></td>
</tr>
tr.highlight td div {
margin-top: 10px;
}

score 3 · Accepted Answer

このようにセルの空の行を追加することで、テーブルの行の間にスペースを作成できます...

<tr><td></td><td></td></tr>

次に、CSSを使用して、次のように空のセルをターゲットにできます…</ p>

table :empty{border:none; height:10px;}

注意：この手法は、通常のセルが空/空にならない場合にのみ有効です。

ノーブレークスペースでも、上記のCSSルールによってセルがターゲットにされるのを防ぐことができます。

言うまでもなく、heightプロパティが含まれていると、スペースの高さを好きなように調整できます。

score 1 · Accepted Answer

別の可能性は、疑似セレクター：afterまたは：beforeを使用することです。

tr.highlight td:last-child:after
{
  content: "\0a0";
  line-height: 3em;
}

これにより、疑似セレクターを理解しないブラウザーの問題を回避できる可能性があります。さらに、背景色は問題になりません。

ただし、欠点は、最後のセルの後に空白が追加されることです。

score 1 · Accepted Answer

価値のあることとして、私はすでにブートストラップ（4.3）を使用していたことを利用しました。これは、行にマージン、ボックスシャドウ、および境界半径を追加する必要があったためです。これは、テーブルでは実行できません。

<div id="loop" class="table-responsive px-4">
<section>
    <div id="thead" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div id="tbody" class="row m-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</section>
</div>

cssで、ブートストラップのテーブル動作を維持するために数行を追加しました

@media (max-width: 800px){
    #loop{
        section{
            min-width: 700px;
        }
    }
}

score 0 · Accepted Answer

class = "highlighted" padding-bottomの前にこのスタイルを追加すると、表示がインラインテーブルになります

css - テーブル行にマージンを追加する方法

18 に答える 18

Related

Reference