html - テーブルの指定された行の境界線を非表示にする方法は?

Question

テーブルの特定の行の境界線を非表示にしたいのですが、どうすればよいですか?
何か案が？
サンプルコードは高く評価されています。

Answer 1

境界線を付けたくない に<td>続くで、CSS プロパティの境界線を使用します。<tr>

私の例では、noBorder1つに与えたクラスを作成しました<tr>。次に、単純なセレクターを使用して、を割り当てることにより、 クラスの内にあるtr.noBorder tdすべての の境界線をなくします。<td><tr>noBorderborder: 0

いずれにせよ関係ないので、px何かを に設定する場合は、単位 (つまり ) を指定する必要がないことに注意してください。0ゼロはあくまでゼロ。

table, tr, td {
  border: 3px solid red;
}
tr.noBorder td {
  border: 0;
}

<table>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
  </tr>
  <tr class="noBorder">
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>A3</td>
    <td>A3</td>
  </tr>
</table>

画像としての出力は次のとおりです。

Answer 2

私はこれを使用して良い結果を得ています：

border-style:hidden;

また、次の場合にも機能します。

border-right-style:hidden; /*if you want to hide just a border on a cell*/

例：

<style type="text/css">
      table, th, td {
       border: 2px solid green;
      }
      tr.hide_right > td, td.hide_right{
        border-right-style:hidden;
      }
      tr.hide_all > td, td.hide_all{
        border-style:hidden;
      }
  }
</style>
<table>
  <tr>
    <td class="hide_right">11</td>
    <td>12</td>
    <td class="hide_all">13</td>
  </tr>
  <tr class="hide_right">
    <td>21</td>
    <td>22</td>
    <td>23</td>
  </tr>
  <tr class="hide_all">
    <td>31</td>
    <td>32</td>
    <td>33</td>
  </tr>
</table>

結果は次のとおりです。

Answer 3

プログラムで noborder クラスを特定の行に追加して非表示にします

<style>
     .noborder
      {
        border:none;
      }
    </style>

<table>

    <tr>
       <th>heading1</th>
       <th>heading2</th>
    </tr>


    <tr>
       <td>content1</td>
       <td>content2</td>
    </tr>
    /*no border for this row */
    <tr class="noborder">
       <td>content1</td>
       <td>content2</td>
    </tr>

</table>