How to hide columns in HTML table?

后端 未结 9 1147
执念已碎
执念已碎 2020-11-27 14:07

I have created a table in ASPX. I want to hide one of the columns based on the requirement but there is no attribute like visible in the HTML table building. Ho

9条回答
  •  醉话见心
    2020-11-27 14:42

    You can use the nth-child CSS selector to hide a whole column:

    #myTable tr > *:nth-child(2) {
        display: none;
    }
    

    This works under assumption that a cell of column N (be it a th or td) is always the Nth child element of its row.

    Here's a demo.


    ​ If you want the column number to be dynamic, you could do that using querySelectorAll or any framework presenting similar functionality, like jQuery here:

    $('#myTable tr > *:nth-child(2)').hide();
    

    Demo with jQuery

    (The jQuery solution also works on legacy browsers that don't support nth-child).

提交回复
热议问题