Here's the page I'm struggling with: http://unanchor.com/browse/

If you open it with Firefox or Chrome, it looks fine.

In IE8 however, the content only takes up about 70% of the table, and I have no clue why. Here's a screenshot from IE8: http://www.unanchor.com/IE_Screenshot.png

Here's my HTML for the table:

<table class="data-table" style="width: 800px">
        <col style="width: 140px" /> <!-- Title -->
        <col style="width: 350px" /> <!-- Description -->
        <col style="width: 50px" /> <!-- Price -->
        <col style="width: 100px" /> <!-- Author -->
        <col style="width: 80px" /> <!-- Reviews -->
        <col style="width: 80px" /> <!-- Ratings -->
        <thead>
            <th>Title</th>
            <th>Description</th>
            <th style="text-align: center;">Price</th>
            <th style="text-align: center;">Author</th>
            <th style="text-align: center;">Reviews</th>
            <th class="last" style="text-align: center;" id="last">Ratings</th>
        </thead>        
        foreach($itineraries as $row)
        {
            echo "<tr>"; 
                echo "<td><Link1</a></td>";
                echo "<td>Text</td>";
                echo "<td>";
                echo "Price</td>";
                echo "<td>Text</td>";
                echo "<td>None Yet</td>";
                echo "<td class=\"last\">None Yet</td>";
            echo "</tr>";
        }
            echo "<tfoot><tr><td colspan=\"100\"></td></tr></tfoot>";
        echo "</table>";

And the CSS:

    /*---:[ Table styles ]:---*/
    .data-table { border:1px solid #bebcb7; }
.data-table tr { background:#fff; }
.data-table td.last, .data-table th.last { border-right:0; }
.data-table tr.last td, .data-table tr.last th { border-bottom:0; }
.data-table th {
    border-right:1px solid #c2d3e0;
    padding:2px 8px;
    background-color: #d9e5ee;
    white-space:nowrap;
    }
.data-table td { padding:1px; }
.data-table tfoot { border-bottom:1px solid #d9dde3;}
.data-table tfoot tr { background-color:#DEE5E8; }
.data-table tfoot td { padding-top:5px; padding-bottom:5px; border-bottom:0; border-right:1px solid #d9dde3; }
.data-table tbody td { border-bottom:1px solid #d9dde3; border-right:1px solid #d9dde3; }

1 answer

Jordan 469
1
point
This was chosen as the best answer

Try adding style="table-layout: fixed;" to the table tag.

Answered over 6 years ago by Jordan
  • Thank you! Problem solved! So easy and so frustrating! Jason Demant over 6 years ago