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.