wake-up-neo.com

Wie blendet man den Rahmen für die angegebenen Zeilen einer Tabelle aus?

Ich möchte den Rand für bestimmte Zeilen einer Tabelle ausblenden. Wie geht das?
Irgendeine Idee?
Beispielcode wird hoch geschätzt.

htmlcsshtml-tableborder
23
Mr.Chowdary

Verwenden Sie den CSS-Eigenschaftsrahmen in den <td>s, nachdem <tr>s den Rahmen nicht enthalten soll. 

In meinem Beispiel habe ich eine Klasse noBorder erstellt, die ich einem <tr> gegeben habe. Dann verwende ich einen einfachen Selektor tr.noBorder td, um den Rand für alle <td>s, die sich innerhalb von <tr>s mit der noBorder-Klasse befinden, zu entfernen, indem border: 0 zugewiesen wird. 

Beachten Sie, dass Sie die Einheit nicht angeben müssen (d. H. px), wenn Sie etwas auf 0 setzen, da dies ohnehin keine Rolle spielt. Null ist nur Null.

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>

Hier ist die Ausgabe als Bild:

Output from HTML

36
simbabque

Ich benutze das mit guten Ergebnissen:

border-style:hidden;

Es funktioniert auch für:

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

Beispiel:

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

Hier ist das Ergebnis:  enter image description here

11
Carlos Toledo

Sie können diese Codezeilen hier einfach hinzufügen, um eine Zeile auszublenden.

Entweder Sie schreiben border:0 oder border-style:hidden;border: none oder es wird dasselbe passieren

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

das Ausführen dieser Codezeilen kann das Problem leicht lösen

1
Pronab Roy

Fügen Sie einer bestimmten Zeile eine programmatische Noborder-Klasse hinzu, um sie auszublenden

<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