Html 如何隐藏表格指定行的边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11517432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide the border for specified rows of a table?
提问by Mr.Chowdary
I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
我想隐藏表格特定行的边框。怎么做？
任何的想法？
示例代码受到高度赞赏。
回答by simbabque
Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
在不希望有边框的<td>s 之后的<tr>s上使用 CSS 属性边框。
In my example I made a class noBorderthat I gave to one <tr>. Then I use a simple selector tr.noBorder tdto make the border go away for all the <td>s that are inside of <tr>s with the noBorderclass by assigning border: 0.
在我的例子中，我做了一个noBorder我给一个的类<tr>。然后，我用一个简单的选择tr.noBorder td，使边框消失了所有的<td>那些内第<tr>s的在noBorder通过分配类border: 0。
Note that you do not need to provide the unit (i.e. px) if you set something to 0as it does not matter anyway. Zero is just zero.
请注意，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>Here's the output as an image:
这是作为图像的输出：
回答by Carlos Toledo
I use this with good results:
我用这个效果很好：
border-style:hidden;
It also works for:
它也适用于：
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
例子：
<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>Here is the result:
结果如下：
回答by Pronab Roy
You can simply add these lines of codes here to hide a row,
您可以简单地在此处添加这些代码行来隐藏一行，
Either you can write border:0or border-style:hidden;border: noneor it will happen the same thing
要么你可以写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>0</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>running these lines of codes can solve the problem easily
运行这几行代码可以轻松解决问题
回答by vikrantx
Add programatically noborder class to specific row to hide it
以编程方式将 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>
