Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cells Width in IE

    Hi,
    I'm having the following problem, which seems kind of basic but I couldn't figure it out - in a table I'm using, where it's important that all the cells in a row will have the same width (or at least that different sections within the row will have a similar width), FF seems to handle that need automatically, while IE doesn't.

    For instance, I tried the following table (where I was expecting the columns "First" and "Third" to have the same width):
    Code:
    .mainTable
     {
         width: 750px;
         border-collapse: collapse;
     }
     .mainTable td
     {
         border: 1px solid black;
         height: 25px;
     }
    
    <table class="mainTable">
    	<tr id="headerRow">
    		<td colspan="8" style="width:40%;">First</td>
    		<td colspan="4" style="width:20%;">Second</td>
    		<td colspan="8" style="width:40%;">Third</td>
    	</tr>
    	<tr id="row0">
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    		<td style="width:5%;"></td>
    	</tr>
    </table>
    And then added some javascript code to see how it was actually divided.
    The widths in the header row were:
    First - 295px, Second - 149px, Third - 302px.
    And the widths in row0 were:
    36px, 36px, 36px, 36px, 36px, 36px, 36px, 36px, 36px, 36px, 37px, 37px, 37px, 37px, 37px, 37px, 37px, 37px, 37px, 36px

    7 pixels difference between "First" and "Third" might seem like a minor issue, but when I have more columns, the difference is increasing - for example, with 100 columns instead of 20, the difference is 39 pixles (279 and 318), and that is a big deal.

    (I also noticed that with 75 columns and a width of 750px it was fine, but, of course, I can't count on something like that as I don't know in advance the number of columns and want to have a table width in percentage)

    Any advice would be appreciated.

    Thanks,
    Amit

  • #2
    New Coder
    Join Date
    Jul 2006
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Been playing with this for a minute, but I'm using the newest version of IE and I'm afraid maybe it fixes your problem, as I'm not able to see anything wrong, unless it's just so minimal that the naked eye can't catch it. What was the javascript you added that showed the widths? Try making the table width 800 pixels instead of 750 and see if you still have the same problem. I was thinking that 750 * 40% divided by 8 doesn't equal a whole number, but this still doesn't explain First and Third being different.

    Also, have you tried doing this with pure CSS and eliminating the tables altogether?

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I won't be surprised if this has been solved in IE8, but in IE6 and in IE7 it does happen.
    I'm also not sure if I can use pure css, because I'm creating the table dynamically, and don't know in advance how many cells I'll have or what the required widths will be.

    The javascript I used for displaying the exact widths was the following:
    Code:
    function OnLoad()
        {    
            // Inputs
            var inputHeaderCells = document.getElementById("inputHeaderCells");
            var inputFirstRowCells = document.getElementById("inputFirstRowCells");
            var inputMain = document.getElementById("inputMain");
            
            // Main table
            var tableMain = document.getElementById("mainTable");        
            var firstRow = document.getElementById("row0");               
            var cells = firstRow.getElementsByTagName("td");            
            var numOfCells = cells.length;
            var sizePerCell = tableMain.clientWidth / numOfCells;
            inputMain.value = "Main table width - " + tableMain.clientWidth; 
            inputMain.value += ", Size per cell - " + sizePerCell;
                  
            // Header cells
            inputHeaderCells.value = "";
            inputFirstRowCells.value = "";
            var headerRow = document.getElementById("headerRow");
            var headerCells = headerRow.getElementsByTagName("td");            
            for (var i=0; i<headerCells.length; i++)
            {
                var cell = headerCells[i];          
                inputHeaderCells.value += i + " - " + cell.clientWidth + "px, ";
            }
            
            // First row cells
            var cells = firstRow.getElementsByTagName("td");            
            var numOfCells = cells.length;            
            for (var i=0; i<numOfCells; i++)
            {
                var cell = cells[i];
                inputFirstRowCells.value += cell.clientWidth + "px, ";
            }
        }
    after adding onload="OnLoad()" to the body, and
    Code:
    <input type="text" id="inputMain" style="width: 500px" />
    <input type="text" id="inputHeaderCells" style="width:500px" />
    <input type="text" id="inputFirstRowCells" style="width:800px;" />
    And the results (in IE) were:
    Main table width - 750, Size per cell - 37.5
    0 - 295px, 1 - 149px, 2 - 302px,
    36px, 36px, 36px, 36px, 36px, 36px, 36px, 36px, 36px, 36px, 37px, 37px, 37px, 37px, 37px, 37px, 37px, 37px, 37px, 36px,

    The reason for the difference between First and Third seems to be the way IE spreads the cell widths - in the example above the cells in the first half of row0 are 36px wide, and in the second half they're 37px wide.

    And you're right - when setting the width to 800 (or any other number which divides by 20, or whatever the number of columns might be), then there is no problem.
    Therefore, my solution for now is to simply round down the width of the table, so it'll divide by the number of columns. However, this is a pretty ugly solution, and the more cells the table contains, the bigger this reduction might get - so any additional ideas might help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •