Home/ Questions/Q 6912839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T09:08:31+00:00

I have a DOM structure like the following: <table class=playlist> <thead> <tr> <th>TH1</th> <th

  • 0

I have a DOM structure like the following:

<table class="playlist">
    <thead>
        <tr>
            <th>TH1</th>
            <th width="53">TH2</th>
            <th width="53">TH3</th>
            <th width="53">TH4</th>
            <th width="53">TH5</th>
            <th width="53">TH6</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>TD1</td>
            <td>TD2</td>
            <td>TD3</td>
            <td>TD4</td>
            <td>TD5</td>
            <td>TD6</td>
        </tr>

        <tr class="expansion">
            <td class="expansion" colspan="6">
                <div class="comment_wrapper">
                    <form>
                        <textarea style="width=482px" class="mini">x</textarea>
                    </form>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Related style rules are like:

table {
    width: 580px;
    border-bottom: 1px solid #EEE;
}

.comment_wrapper {
height: 270px;
border: 1px red solid;
overflow-x: hidden;
overflow-y: auto;
}

.comment_wrapper form textarea {
height: 70px;
width: 482px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px red solid;
}

My problem is that whenever I added the second tr, width of table columns changed into a mess like the following in IE6/7.

enter image description here

When I comment out this tr, the column width restore.

Why does adding a tr affects column width? How can I avoid this effect?

PS
I’ve reproduced this problem on JSFiddle, and this is the link: http://jsfiddle.net/7mYY8/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, you have 6 columns 5 of which have a defined width.

    The 1st column doesn’t. This means it has to be computed. Sure you have the table width defined in CSS, but IE 6 isn’t exactly the best thing.

    Your best bet is going to be to explicitly define the width of all of your header columns. Then give the table the css attribute of “table-layout: fixed”. This is going to enforce your widths for the entire rendering of the table.

    • 0