如何使用CSS隐藏HTML表中的某些表列 [英] How can i hide certain table column in a HTML table using CSS
本文介绍了如何使用CSS隐藏HTML表中的某些表列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个html表,如下所示
I have a html table which is as follows
<table class="report">
<tbody>
<tr>
<td >col1</td>
<td >col2</td>
<td>col3</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
<tr>
<td>R2</td>
<td >2/17</td>
<td >{2/17}</td>
<td > </td>
<td > </td>
<td > </td>
<td > </td>
</tr>
</tbody>
</table>
,您可以看到,col3后,所有后续列都为空。
我想只显示前三列,隐藏其余的。
我如何使用CSS实现这一点。
我无法控制HTML表格,所以我无法修改它。
as you can see , after col3 , all subsequent columns are empty. I want to show only first three columns and hide the rest. How can i achieve this using CSS. I dont have control over HTML table so i can not modify it.
感谢
推荐答案
您可以这样做:
* EDIT - 根据我的知识 nth-child
和 visibility:hidden
不要一起玩。对于你想要的,你需要使用 display:none;
- 根据我提供给你的代码。
*EDIT - From my knowledge nth-child
and visability: hidden
don't play nice together. For what you want, you'd need to use display: none;
- based upon the code I've provided you.
CSS:
table{
border-collapse: collapse;
}
table tr td{
padding: 10px;
border: 1px solid #ccc;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
table tr td:nth-child(n+4){
display: none;
}
这篇关于如何使用CSS隐藏HTML表中的某些表列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文