简体   繁体   中英

Table cells not aligned in Firefox, IE

I'm trying to create a table whose first column is fixed. I have done that somehow but i'm not able to get the same result across all the browsers. The result is correct only on Chrome. This is the result I'm getting on Firefox/IE 8:

在此处输入图片说明

and that on Chrome:

在此处输入图片说明

Here is my HTML code:

<div id="riassuntoOreTecnico">

<table id="riassuntoOreTecnicoTable" >
    <tr>
        <th>Technician Name</th>
        <td style="padding-left:165px"></td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>   
    <tr>
        <th>Table Cell</th>
        <td style="padding-left:165px"></td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>

        <td>Table Cell</td>
    </tr>
</table>

</div>

And the CSS:

#riassuntoOreTecnico {
    width: 94%;
    float: left;
    margin: 30px 35px;
    overflow-x: scroll;
    overflow-y: visible;
}

#riassuntoOreTecnicoTable {
/*  border-collapse: separate;*/
    border: 1px solid #ddd;
    float: left;
}

#riassuntoOreTecnicoTable th {
    background: #d5d5d5;
    font-weight: bold;
    padding: 5px 8px;
    position: absolute;
    top:auto;
    width:158px;
}

#riassuntoOreTecnicoTable td {
    border: 1px solid #d5d5d5;
    padding: 5px 8px;
}

Can anyone suggest whats wrong here with my code so i can get the same result on firefox/IE8 as well?

I have added white-space:normal to the table CSS and that fixed it for me.

Here is the updated code:

#riassuntoOreTecnicoTable {
/*  border-collapse: separate;*/
    border: 1px solid #ddd;
    float: left;
    white-space:normal
}

Thank you all.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM