blocks|key|737638|text|为此，您需要使用样式表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|737639|<td+style="display:none;">|code-block|syntax|javascript|737640|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You need to use Style Sheet for this purpose.</p>

<pre><code>&lt;td style="display:none;"&gt;
</code></pre>


blocks|key|953684|text|您还可以按照vs+dev的建议以编程方式执行，方法是使用Javascript指定样式，方法是遍历这些列，并在特定索引处设置td元素，使其具有该样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|953685|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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.</p>


blocks|key|737760|text|您还可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|737761|<td+style="visibility:hidden;">
or
<td+style="visibility:collapse;">|code-block|syntax|javascript|737762|它们之间的不同之处在于，“隐藏”隐藏了单元格，但它保留了空间，而“折叠”的空间则不像display:none。当隐藏整列或整行时，这一点很重要。|737763|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>you can also use:</p>

<pre><code>&lt;td style="visibility:hidden;"&gt;
or
&lt;td style="visibility:collapse;"&gt;
</code></pre>

<p>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.</p>


blocks|key|737794|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|737795|<style>
.hideFullColumn+tr+>+.hidecol
{
++++display:none;
}
</style>|code-block|syntax|javascript|737796|737797|在表中使用.hideFullColumn，在th.You中使用.hidecol，不需要在td中单独添加类，因为索引可能没有考虑到每个td，因此会有问题。|737798|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
.hideFullColumn tr &gt; .hidecol
{
    display:none;
}
&lt;/style&gt;</code></pre>
</div>
</div>
</p>

<p>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.</p>


blocks|key|737875|text|Bootstrap用户在<td>上使用.hidden类。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|737876|entityMap^0|C|4|J|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Bootstrap people use <code>.hidden</code> class on <code>&lt;td&gt;</code>.</p>


blocks|key|953907|text|还可以使用列元素https://developer.mozilla.org/en/docs/Web/HTML/Element/col隐藏列|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|953908|要隐藏表中的第二列，请执行以下操作：|953909|<table>
++<col+/>
++<col+style="visibility:collapse"/>
++<tr><td>visible</td><td>hidden</td></tr>
++<tr><td>visible</td><td>hidden</td></tr>|code-block|syntax|javascript|953910|已知问题:这在Google+Chrome中不起作用。请在https://bugs.chromium.org/p/chromium/issues/detail?id=174167上为该bug投票|953911|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/HTML/Element/col|1|https://bugs.chromium.org/p/chromium/issues/detail?id=174167^0|8|1M|0|0|0|0|S|1O|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>You can also hide a column using the col element <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/col" rel="noreferrer">https://developer.mozilla.org/en/docs/Web/HTML/Element/col</a></p>

<p>To hide the second column in a table:</p>

<pre><code>&lt;table&gt;
  &lt;col /&gt;
  &lt;col style="visibility:collapse"/&gt;
  &lt;tr&gt;&lt;td&gt;visible&lt;/td&gt;&lt;td&gt;hidden&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;visible&lt;/td&gt;&lt;td&gt;hidden&lt;/td&gt;&lt;/tr&gt;
</code></pre>

<p>Known issues: this won't work in Google Chrome. Please vote for the bug at <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=174167" rel="noreferrer">https://bugs.chromium.org/p/chromium/issues/detail?id=174167</a></p>


blocks|key|953918|text|<!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("%2B+column+%2B"),table+th:nth-child("%2B+column+%2B")+
{display:+none}";
styleSheet.insertRule(rule);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|953919|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;style id="myStyleSheet"&gt;
...
&lt;/style&gt;

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);
</code></pre>


blocks|key|738024|text|下面是动态隐藏列的另一种解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|738025|为要隐藏的列的th和td定义类|738026|<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>|code-block|syntax|javascript|738027|下面是用于隐藏列的Jquery脚本。|738028|$('#hide-col').click(function+()+{++++++
++++$(".dynmic-hidden-col").hide();
});|738029|这样就可以动态地隐藏表列。|738030|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Here is the another solution to hide dynamically a column</p>
<p>define class for both th and td of the column to hide</p>
<pre><code>&lt;table&gt;
   &lt;tr&gt;
     &lt;th&gt; Column 1 &lt;/th&gt;
     &lt;th class=&quot;dynamic-hidden-col&quot;&gt; Column 2 &lt;/th&gt;
     &lt;th Column 3 &lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt; Value 1 &lt;/td&gt;
     &lt;td class=&quot;dynamic-hidden-col&quot;&gt; Value 2 &lt;/td&gt;
     &lt;td&gt; Value 3 &lt;/td&gt;
  &lt;/tr&gt;
     &lt;td&gt; row 2 Value 1 &lt;/td&gt;
     &lt;td class=&quot;dynamic-hidden-col&quot;&gt; row 2 Value 2 &lt;/td&gt;
     &lt;td&gt; row 2 Value 3 &lt;/td&gt;
  &lt;tr&gt;
&lt;/table&gt;
</code></pre>
<p>Here is the Jquery script for hide column.</p>
<pre><code>$('#hide-col').click(function () {      
    $(&quot;.dynmic-hidden-col&quot;).hide();
});
</code></pre>
<p>This way the table column can be hidden dynamically.</p>


<p>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 <code>visible</code> in the HTML table building. How can I solve my problem?</p>


How to hide columns in HTML table?

我已经在ASPX中创建了一个表。我想根据需求隐藏其中一列，但在构建HTML表时没有类似于visible的属性。我如何解决我的问题？

问如何隐藏HTML表格中的列？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何隐藏HTML表格中的列？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何隐藏HTML表格中的列？
EN