Cách ẩn đường viền cho các hàng được chỉ định của bảng?

Question

Tôi muốn ẩn đường viền cho một hàng cụ thể của bảng. Làm cách nào để thực hiện?
Bất kỳ ý tưởng nào?
Mã mẫu được đánh giá cao.

Answer 1

Sử dụng đường viền thuộc tính CSS trên <td> s theo sau <tr> mà bạn không muốn có đường viền.

Trong ví dụ của tôi, tôi đã tạo một lớp noBorder mà tôi đã cung cấp cho một <tr>. Sau đó, tôi sử dụng công cụ chọn đơn giản tr.noBorder td để làm cho đường viền biến mất cho tất cả các <td> s nằm trong số <tr> s với lớp noBorder bằng cách gán border: 0.

Lưu ý rằng bạn không cần phải cung cấp thiết bị (ví dụ: px) nếu bạn đặt thứ gì đó thành 0 vì nó không quan trọng. Zero chỉ bằng không.

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>

Dưới đây là các đầu ra như một hình ảnh:

Answer 2

Thêm lớp programatically noborder để hàng cụ thể để ẩn nó

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

Answer 3

tôi sử dụng điều này với kết quả tốt:

border-style:hidden; 

Nó cũng làm việc cho:

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

Ví dụ:

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

Dưới đây là kết quả:

Answer 4

Bạn chỉ có thể thêm các dòng mã vào đây để ẩn liên tiếp,

Hoặc bạn có thể viết border:0 hoặc border-style:hidden;border: none hoặc nó sẽ xảy ra điều tương tự

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

chạy những dòng mã này có thể giải quyết vấn đề dễ dàng