Firefox + Chrome桌面渲染问题

Question

我遇到显示列以编程方式显示的表的问题。

以下是可以看到此问题的HTML代码（并且已经确认它不影响渲染的代码）。

<table> 
<tr> 
    <th>NUMER</th>          
    <th>NAME</th> 
    <th align="center" style="display:block;">LOCATION</th> 
    <th align="center" style="display:none;">1</th> 
    <th align="center" style="display:block;">2</th> 
</tr> 
<tr> 
    <td>12345</td> 
    <td>BOB Jr</td>          
    <td align="center" style="display:block;"><input type="CheckBox" ID="updateLocation" runat="server" /></td> 
    <td align="center" style="display:none;"><input type="CheckBox" ID="updateLocation" runat="server" /></td> 
    <td align="center" style="display:block;"><input type="CheckBox" ID="updateLocation" runat="server" /></td>            
</tr> 

这将显示为在Chrome和Firefox如下：

风格编程方式添加，这显然是导致该问题，但是我想知道如果任何人有建议，以解决这一问题？

表格列必须以编程方式显示，因为此功能是用户驱动的。

另请注意，这对IE浏览器正常工作。

Answer 1

不要使用

display:block 

即与表不兼容。

您正在寻找：

display:table-cell 

不过，我建议你把这个问题和答案，然后再继续良好的阅读，特别是如果你必须支持旧的IE：show/hide html table columns using css

Answer 2

你所看到的这个问题是由于HTML代码中的一种非常具体的风格造成的。从html中删除style =“display：block”（或以编程方式插入）将解决此问题。参考纠正的HTML标记。

<table> 
<tbody> 
    <tr> 
     <th>NUMER</th>          
     <th>NAME</th> 
     <th align="center" style="">LOCATION</th> 
     <th align="center" style="display:none;">1</th> 
     <th align="center" style="">2</th> 
    </tr> 
    <tr> 
      <td>12345</td> 
      <td>BOB Jr</td>          
      <td align="center" style=""><input type="CheckBox" id="updateLocation" runat="server"></td> 
      <td align="center" style="display:none;"><input type="CheckBox" id="updateLocation" runat="server"></td> 
      <td align="center" style=""><input type="CheckBox" id="updateLocation" runat="server"></td>            
    </tr> 
</tbody> 

希望这有助于。