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上显示如下： enter image description here

这种风格是以编程方式添加的，这显然会导致问题，但我想知道是否有人有解决此问题的建议？

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

另请注意，这在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>

希望这有帮助。

Firefox + Chrome表格渲染问题

2 个答案: