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?
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?
Respostas:
Você precisa usar a folha de estilo para este propósito.
<td style="display:none;">td:first-child { display:none; }
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.
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();(A solução jQuery também funciona em navegadores legados que não oferecem suportenth-child ).
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.
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
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.
Pessoas bootstrap usam .hiddenclasse em <td>.
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
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>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.
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.
<!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);