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> 

希望這有助於。