如何使用CSS隐藏HTML表中的某些表列 [英] How can i hide certain table column in a HTML table using CSS

问题描述

我有一个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 >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
      <tr>
        <td>R2</td>
        <td >2/17</td>
        <td >{2/17}</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</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.

感谢

推荐答案

您可以这样做：

http://jsfiddle.net/nEQ6g/1/

* 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屋！