CODEWITHSUNDEEP
c#javascriptasp.netcssfirefox
Kush
Kush

Reputation: 196

Firefox + Chrome table rendering issue

I am having an issue with displaying a table where the columns are displayed programmatically.

Following is the html code where this issue can be seen (and has confirmed its not the code behind affecting the rendering).

<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>

This will display as the following on Chrome and Firefox:enter image description here

The style is added programmatically, which is clearly causing the issue however i was wondering if anyone has suggestions to resolving this issue?

The table columns have to be displayed programmatically as this functionality is user driven.

Also note this works fine on IE.

Upvotes: 2

Views: 836

Answers (2)

Praneeth
Praneeth

Reputation: 99

You are seeing this issue due to a very specific style in your HTML code. Removing the style="display:block" from the html (or from being programmatically inserted) will solve the issue. Refer the rectified HTML markup.

<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>

Hope this helps.

Upvotes: 1

KingCronus
KingCronus

Reputation: 4519

Don't use

 display:block

That is incompatible with tables.

You are looking for:

display:table-cell

That said, I suggest you give this question and answer a good read before proceeding, especially if you have to support older IE: show/hide html table columns using css

Upvotes: 1

Related Questions