asked on

Table column width not obaying

I'm trying to create a table within a table, however the outer table has an extra column for the scrollbar, however even though I specify the column width it is not obeying the same column width and making the columns out of line.

I've tried making the table fixed, and displaying as a block but to no avail.

Ive put my code on JSFiddle in the hope someone can assist me in the correct CSS I need.

Any pointers would be appreciated, thank you in advance

nanharbison

Why don't you put the div outside the table, and just have one table?

 <div class="scrollit" style="overflow-y: scroll; overflow-x: hidden; height:100px; width:325px;"><table id="testTable" border="1">
    <tr>
        <th width="45px">A00</th>
        <th width="45px">B00</th>
        <th width="45px">C00</th>
        <th width="45px">D00</th>
        <th width="45px">E00</th>
        <th width="45px">F00</th>
        <th width="45px">G00</th>
    </tr>
    <tbody>

                        <tr>
                            <td width="45px">A01</td>
                            <td width="45px">B01</td>
                            <td width="45px">C01</td>
                            <td width="45px">D01</td>
                            <td width="45px">E01</td>
                            <td width="45px">F01</td>
                            <td width="45px">G01</td>
                       
                        </tr>
                        <tr>
                            <td width="45px">A02</td>
                            <td width="45px">B02</td>
                            <td width="45px">C02</td>
                            <td width="45px">D02</td>
                            <td width="45px">E02</td>
                            <td width="45px">F02</td>
                            <td width="45px">G02</td>
                        </tr>
                        <tr>
                            <td width="45px">A03</td>
                            <td width="45px">B03</td>
                            <td width="45px">C03</td>
                            <td width="45px">D03</td>
                            <td width="45px">E03</td>
                            <td width="45px">F03</td>
                            <td width="45px">G03</td>
                        </tr>
                        <tr>
                            <td width="45px">A04</td>
                            <td width="45px">B04</td>
                            <td width="45px">C04</td>
                            <td width="45px">D04</td>
                            <td width="45px">E04</td>
                            <td width="45px">F04</td>
                            <td width="45px">G04</td>
                        </tr>
                        <tr>
                            <td width="45px">A05</td>
                            <td width="45px">B05</td>
                            <td width="45px">C05</td>
                            <td width="45px">D05</td>
                            <td width="45px">E05</td>
                            <td width="45px">F05</td>
                            <td width="45px">G05</td>
                        </tr>
                        <tr>
                            <td width="45px">A06</td>
                            <td width="45px">B06</td>
                            <td width="45px">C06</td>
                            <td width="45px">D06</td>
                            <td width="45px">E06</td>
                            <td width="45px">F06</td>
                            <td width="45px">G06</td>
                        </tr>
                        <tr>
                            <td width="45px">A07</td>
                            <td width="45px">B07</td>
                            <td width="45px">C07</td>
                            <td width="45px">D07</td>
                            <td width="45px">E07</td>
                            <td width="45px">F07</td>
                            <td width="45px">G07</td>
                        </tr>
                        <tr>
                            <td width="45px">A08</td>
                            <td width="45px">B08</td>
                            <td width="45px">C08</td>
                            <td width="45px">D08</td>
                            <td width="45px">E08</td>
                            <td width="45px">F08</td>
                            <td width="45px">G08</td>
                        </tr>
                        <tr>
                            <td width="45px">A09</td>
                            <td width="45px">B09</td>
                            <td width="45px">C09</td>
                            <td width="45px">D09</td>
                            <td width="45px">E09</td>
                            <td width="45px">F09</td>
                            <td width="45px">G09</td>
                        </tr>
                        <tr>
                            <td width="45px">A10</td>
                            <td width="45px">B10</td>
                            <td width="45px">C10</td>
                            <td width="45px">D10</td>
                            <td width="45px">E10</td>
                            <td width="45px">F10</td>
                            <td width="45px">G10</td>
                        </tr>
                        <tr>
                            <td width="45px">A11</td>
                            <td width="45px">B11</td>
                            <td width="45px">C11</td>
                            <td width="45px">D11</td>
                            <td width="45px">E11</td>
                            <td width="45px">F11</td>
                            <td width="45px">G11</td>
                        </tr>
                        <tr>
                            <td width="45px">A12</td>
                            <td width="45px">B12</td>
                            <td width="45px">C12</td>
                            <td width="45px">D12</td>
                            <td width="45px">E12</td>
                            <td width="45px">F12</td>
                            <td width="45px">G12</td>
                        </tr>
                        <tr>
                            <td width="45px">A13</td>
                            <td width="45px">B13</td>
                            <td width="45px">C13</td>
                            <td width="45px">D13</td>
                            <td width="45px">E13</td>
                            <td width="45px">F13</td>
                            <td width="45px">G13</td>
                        </tr>
                        <tr>
                            <td width="45px">A14</td>
                            <td width="45px">B14</td>
                            <td width="45px">C14</td>
                            <td width="45px">D14</td>
                            <td width="45px">E14</td>
                            <td width="45px">F14</td>
                            <td width="45px">G14</td>
                        </tr>
                        <tr>
                            <td width="45px">A15</td>
                            <td width="45px">B15</td>
                            <td width="45px">C15</td>
                            <td width="45px">D15</td>
                            <td width="45px">E15</td>
                            <td width="45px">F15</td>
                            <td width="45px">G15</td>
                        </tr>
                        <tr>
                            <td width="45px">A16</td>
                            <td width="45px">B16</td>
                            <td width="45px">C16</td>
                            <td width="45px">D16</td>
                            <td width="45px">E16</td>
                            <td width="45px">F16</td>
                            <td width="45px">G16</td>
                        </tr>

    </tbody>
</table>
</div>

Open in new window

nanharbison

Actually, the width could be a little wider, like 350px or something.

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nanharbison

Thanks Scott. The add code function used to be in a different place, and I couldn't find where it went. I have always used the code block before. I see it now.