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. How can I solve my problem?
10 Answers
You need to use Style Sheet for this purpose.
<td style="display:none;">
-
1
-
how should i add style to it when i am making table using javascript createelement(td); Commented Sep 8, 2015 at 19:20
-
2@office302 Apply this style only to the first td? Or you want to use only CSS - This you can do something like this
td:first-child { display:none; }
– AnurajCommented Sep 9, 2015 at 6:08 -
@Anuraj it should be noted that :first-child etc. are supported > IE 11 and Edge, good one anyway Commented Jul 26, 2017 at 9:41
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.
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();
(The jQuery solution also works on legacy browsers that don't support nth-child
).
-
1This can have damaging side effects, see my answer below for an improved solution. Commented Apr 7, 2015 at 20:12
-
@RickSmith Good point. Updated my post to avoid the problem in another way (using the child selector).– KosCommented Apr 7, 2015 at 20:38
-
-
Nice solution but need a bit more consideration on the colspan case.– CinossCommented Mar 26, 2016 at 9:27
you can also use:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">
The difference between them that "hidden" hides the cell but it holds the space but with "collapse" the space is not held like display:none. This is significant when hidding a whole column or row.
-
2I've found that for div tags collapse also will hold the space. For the div tags you would have to use display: none; in order to truly collapse and not hold the space. Commented Apr 3, 2016 at 11:30
-
5
visibility: collapse
is designed specifically for handling cell showing/hiding, since there is a difference when recalculating cell width/height between this anddisplay:none
. See developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values– SteveBCommented Sep 23, 2016 at 7:18
Kos's answer is almost right, but can have damaging side effects. This is more correct:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}
CSS (Cascading Style Sheets) will cascade attributes to all of its children. This means that *:nth-child(1)
will hide the first td
of each tr
AND hide the first element of all td
children. If any of your td
have things like buttons, icons, inputs, or selects, the first one will be hidden (woops!).
Even if you don't currently have things that will be hidden, image your frustration down the road if you need to add one. Don't punish your future self like that, that's going to be a pain to debug!
My answer will only hide the first td
and th
on all tr
in #myTable
keeping your other elements safe.
Bootstrap people use .hidden
class on <td>
.
-
4
You can also hide a column using the col element https://developer.mozilla.org/en/docs/Web/HTML/Element/col
To hide the second column in a table:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>
Known issues: this won't work in Google Chrome. Please vote for the bug at https://bugs.chromium.org/p/chromium/issues/detail?id=174167
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>
use .hideFullColumn in table and .hidecol in th.You don't need to add class in td individually as it will be problem because index may not be in mind of each td.
You can also do what vs dev suggests programmatically by assigning the style with Javascript by iterating through the columns and setting the td element at a specific index to have that style.
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>
var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table tr td:nth-child("+ column +"),table th:nth-child("+ column +")
{display: none}";
styleSheet.insertRule(rule);
-
3Hope It will solve issue but please add explanation of your code with it so user will get perfect understanding which he/she really wants. Commented May 25, 2020 at 16:14
Here is the another solution to hide dynamically a column
define class for both th and td of the column to hide
<table>
<tr>
<th> Column 1 </th>
<th class="dynamic-hidden-col"> Column 2 </th>
<th Column 3 </th>
</tr>
<tr>
<td> Value 1 </td>
<td class="dynamic-hidden-col"> Value 2 </td>
<td> Value 3 </td>
</tr>
<td> row 2 Value 1 </td>
<td class="dynamic-hidden-col"> row 2 Value 2 </td>
<td> row 2 Value 3 </td>
<tr>
</table>
Here is the Jquery script for hide column.
$('#hide-col').click(function () {
$(".dynmic-hidden-col").hide();
});
This way the table column can be hidden dynamically.