web-dev-qa-db-ja.com

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

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

htmlcsshtml-tableborder
31
Mr.Chowdary

<td>sに続く<tr>sのCSSプロパティのボーダーを使用して、ボーダーを付けたくない場合。

この例では、<tr>に与えたクラスnoBorderを作成しました。次に、単純なセレクターtr.noBorder tdを使用して、<td>を割り当てて、noBorderクラスを持つ<tr>s内のすべてのborder: 0sの境界線を取り除きます。

0に何かを設定する場合、とにかく重要ではないので、ユニット（つまりpx）を提供する必要はないことに注意してください。ゼロはただのゼロです。

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>

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

Output from HTML

40
simbabque

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

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>

結果は次のとおりです。 enter image description here

13
Carlos Toledo

ここにこれらのコード行を追加するだけで行を非表示にしたり、

border:0 または border-style:hidden;border: noneまたはそれは同じことです

<style type="text/css">
              table, th, td {
               border: 1px solid;
              }
              
              tr.hide_all > td, td.hide_all{
                 border: 0;
                
              }
          }
        </style>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100</td>
      </tr>
      <tr class= hide_all>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300</td>
      </tr>
      <tr>
        <td>Cleveland</td>
        <td>Brown</td>
        <td>$250</td>
      </tr>
    </table>

これらのコード行を実行すると、問題を簡単に解決できます

1
Pronab Roy

プログラム的に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>
0
vikrantx