CODEWITHSUNDEEP
htmlhtml-table
Yaqub Ahmad
Yaqub Ahmad

Reputation: 27659

Colspan is disturbing table layout

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!

Upvotes: 2

Views: 4029

Answers (5)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

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).

Upvotes: 4

Barry Kaye
Barry Kaye

Reputation: 7761

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>

Upvotes: 0

Sindhara
Sindhara

Reputation: 1473

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

Upvotes: 0

ericosg
ericosg

Reputation: 4965

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.

Upvotes: 2

Eugene Trofimenko
Eugene Trofimenko

Reputation: 1631

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')"/>)

Upvotes: 3

Related Questions