1. ホーム
  2. css

[解決済み】テーブルの行にマージンを追加する方法 <tr> [重複]。

2022-04-04 06:01:06

質問

多くの行を含むテーブルがあります。これらの行のいくつかは class="highlight" であり、異なるスタイルで強調表示する必要がある行を意味する。これらの行の前後にスペースを追加して、他の行と少し離れて見えるようにしたいのです。

で実現できると思ったのですが margin-top:10px;margin-bottom:10px; が、うまくいきません。どなたか、この方法をご存知の方、あるいは、できるかもしれません。以下がHTMLで、tbodyの2番目のtrをclass highlightにしました。

<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>

解決方法は?

テーブルの行にマージン値を設定することができません。パディングを増やすことはできますか?そうすればうまくいくでしょう。そうでなければ <tr class="spacer"></tr> の前後に class="highlighted" の行になります。