Como esconder colunas na tabela HTML?

93

Criei uma tabela em ASPX. Quero ocultar uma das colunas com base no requisito, mas não há nenhum atributo como visiblena construção da tabela HTML. Como posso resolver meu problema?

html asp.net html-table user601367
fonte

169

Você precisa usar a folha de estilo para este propósito.

<td style="display:none;">

Anuraj
fonte

1

que tal apenas a primeira coluna usando css de html

office 302

como devo adicionar estilo a ele quando estou fazendo tabela usando javascript createelement (td);

escritório 302,

1

@ office302 Aplicar este estilo apenas ao primeiro td? Ou você quer usar apenas CSS - Isso você pode fazer algo assimtd:first-child { display:none; }

Anuraj 09/09/2015

@Anuraj deve ser notado que: primeiro filho etc. são suportados> IE 11 e Edge, bom de qualquer maneira

Vitaliy Terziev

87

Você pode usar o nth-childseletor CSS para ocultar uma coluna inteira:

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

Isso funciona supondo que uma célula da coluna N (seja a thou td) é sempre o enésimo elemento filho de sua linha.

Aqui está uma demonstração.

Se você quiser que o número da coluna seja dinâmico, pode fazer isso usando querySelectorAllou qualquer estrutura que apresente funcionalidade semelhante, como jQueryaqui:

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

Demonstração com jQuery

(A solução jQuery também funciona em navegadores legados que não oferecem suportenth-child ).

Kos
fonte

1

Isso pode ter efeitos colaterais prejudiciais, veja minha resposta abaixo para uma solução aprimorada.

Rick Smith,

@RickSmith Bom argumento. Atualizei meu post para evitar o problema de outra forma (usando o seletor filho).

Kos,

o seletor de crianças é definitivamente melhor. Boa resposta.

Rick Smith,

Boa solução, mas precisa de um pouco mais de consideração no caso do colspan.

Cinoss

30

você também pode usar:

<td style="visibility:hidden;">
or
<td style="visibility:collapse;">

A diferença entre eles que "oculta" esconde a célula, mas mantém o espaço, mas com "colapso" o espaço não é mantido como exibição: nenhum. Isso é significativo ao ocultar uma coluna ou linha inteira.

Dov Miller
fonte

1

Descobri que, para as tags div, o colapso também mantém o espaço. Para as tags div, você teria que usar display: none; para realmente entrar em colapso e não segurar o espaço.

Dov Miller

5

visibility: collapseé projetado especificamente para lidar com a exibição / ocultação da célula, uma vez que há uma diferença ao recalcular a largura / altura da célula entre isso e display:none. Consulte developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

SteveB

28

A resposta de Kos está quase certa, mas pode ter efeitos colaterais prejudiciais. Isso é mais correto:

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS (Cascading Style Sheets) colocará atributos em cascata para todos os seus filhos. Isso significa que *:nth-child(1)irá ocultar o primeiro tdde cada tr E ocultar o primeiro elemento de todos os tdfilhos. Se algum de seus tdtiver coisas como botões, ícones, entradas ou seleções, o primeiro será escondido (woops!).

Mesmo se você não atualmente tem coisas que vão ser escondidas, imagem sua frustração na estrada se você precisa adicionar um. Não castigue o seu futuro eu assim, vai ser chato depurar!

Minha resposta só vai esconder a primeira tde them todos trem #myTablemanter seus outros elementos de segurança.

Rick smith
fonte

10

Pessoas bootstrap usam .hiddenclasse em <td>.

theapache64
fonte

6

Você também pode ocultar uma coluna usando o elemento col https://developer.mozilla.org/en/docs/Web/HTML/Element/col

Para ocultar a segunda coluna em uma tabela:

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

Problemas conhecidos: isso não funciona no Google Chrome. Vote no bug em https://bugs.chromium.org/p/chromium/issues/detail?id=174167

Coronel Panic
fonte

2

<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

Expandir trecho

use .hideFullColumn na tabela e .hidecol na tabela. Você não precisa adicionar classe em td individualmente, pois será um problema porque o índice pode não estar em mente para cada td.

Souvik Set
fonte

1

Você também pode fazer o que vs dev sugere programaticamente atribuindo o estilo com Javascript, iterando através das colunas e definindo o elemento td em um índice específico para ter esse estilo.

Tamarintech
fonte

0

<!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);

Albert
fonte

2

Espero que isso resolva o problema, mas acrescente uma explicação do seu código para que o usuário compreenda perfeitamente o que ele realmente deseja.

Jaimil Patel

Como esconder colunas na tabela HTML?

Respostas: