如何隐藏表格的指定行的边框？ [英] How to hide the border for specified rows of a table?

问题描述

我想隐藏表格的特定行的边框。怎么做？

任何想法？

示例代码是高度赞赏的。

解决方案

在< td> $ c>< tr> s你不想拥有边框。

在我的示例中，我创建了一个 noBorder ，它给了我一个< tr> ; 。然后，我使用一个简单的选择器 tr.noBorder td 使所有< td> s的边框消失使用< tr> s通过分配边界： noBorder 。

请注意，如果将某些内容设置为<$ c，则不需要提供单位（即 px ） $ c> 0 ，因为它无关紧要。 0只是零。

  table，tr，td {border：3px solid red;} tr.noBorder td {border：0;}  

<表> < 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> < / table>

作为图像：

p>

I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.

解决方案

Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.

In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.

Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.

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>

Here's the output as an image:

这篇关于如何隐藏表格的指定行的边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！