2

Please see below html:

      <table style="width: 700px;table-layout: fixed ; margin-top: 30px;" cellpadding="0" cellspacing="0">
        <tr class="tableHeader">
          <td width="220px">Event Name</td>

          <td width="120px">City</td>
          <td width="77px">Date</td>
          <td width="110px">Price</td>
          <td width="80px">Status</td>
          <td width="60px">Select</td>
        </tr>
    </table>

    <div style="overflow: auto;height: 360px; width: 730px;">
        <table style='width: 700px;table-layout: fixed;' cellpadding='0' cellspacing='0'>
                <tr >
                    <td colspan='6' >adnanpo </td>
                </tr>
                <tr >
                    <td width='220px' >adnanpo </td>
                    <td width='120px' > </td>
                    <td width='77px' >04/20/2012 </td>
                    <td width='110px' >USD $30.00 </td>
                    <td width='80px' >Paid </td>
                    <td width='60px' >
                        <input class='orgOkButton' type='button' id='btnOpenOrder' name='btnOpenOrder' onclick='return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')</td> 
                </tr>
            </table>
        </div>

Below part is casuing the issue:

                <tr >
                    <td colspan='6' >adnanpo </td>
                </tr>

enter image description here

Please sse the image, the column width is disturbed!! Please help me to fix it!

4

5 に答える 5

4

The obvious solution is to remove the tr element that causes the problem. It does not seem to have a function here. If you just want some spacer there, put a div element between the two tables.

The problem arises because table-layout: fixed tells the browser to decide on column widths according to the first row, if widths have not been set in certain other ways. Here the first row has just one cell that spans all columns, and then the defined behavior is to divide the width evenly between the columns.

Alternatively, set the column widths explicitly, e.g. using

    <col width=220>
    <col width=120>

etc. right after each <table> tag. But make sure that the sums of the widths add up to the number you set as the total width of the table (they currently don’t). When col elements are used that way to set all column widths, browsers will use those exact widths without questioning (which may cause problems, but I presume you have considered them).

于 2012-05-11T10:46:26.967 に答える
3

Remove 'table-layout' property in your second table and it will work fine. And close you input element (onclick="return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')"/>)

于 2012-05-11T10:28:54.753 に答える
2

If I understand correctly, you are worried to the fact that your columns are not aligning to the top.

Let me first suggest that you use the below CSS:

table { empty-cells: show; }

This will allow the empty cell you have to fill in the space. (otherwise you can just put an &nbsp; in it's blank space).

Also, I suggest you use one continuous table if you can.

于 2012-05-11T10:30:28.437 に答える
0

Close your input-tag - the > is missing. If the problem is still there we can look further.

于 2012-05-11T10:30:44.803 に答える
0

Yes this will be the case by using colspan in the "first row" of a table. To get around this you could do something like this (again just for the first row - you can use colspan fine further down):

                <tr>
                    <td width="220px"><div style="position:absolute;width:220px;">adnanpo</div></td>
                    <td width="120px"></td>
                    <td width="77px"></td>
                    <td width="110px"></td>
                    <td width="80px"></td>
                    <td width="60px"></td> 
                </tr>
于 2012-05-11T10:33:18.553 に答える