Table's td with specified height doesn't work the same way on different browsers
I have a table and I need that every cell have the same fixed height and width.
So I have:
th, td {
min-width: 110px;
width: 110px;
max-width: 110px;
min-height: 60px;
height: 60px;
max-height: 60px;
}
a td is just:
<td><span>*n开发者_Python百科umber*</span></td>
I was testing my code on Firefox 7 and I saw they OK but in Chrome/IE9 the cells are taller.
So:
With or without min-max height, the heights are:
FF7: 56px/60px (without borders / with borders) Chrome: 62px/66px IE9: 61px/65px
The problem is that I made a background for the TD on Photoshop and it's look weird if the size is not the right one and I don't know how to resolve it.
Outside this problem, chrome is acting weird. I Apply via Javascript some a to some td's once the page is loaded and they don't work on chrome... until you refresh sometimes.
EDIT: The table have fixed height and some border-spacing too.
EDIT 2: I made a jsFiddle: http://jsfiddle.net/cFTpp/1/ The difference is less (58vs60) but is still different.
Use a fixed table layout:
table { table-layout: fixed; }
I ended changing the table for divs, more easy to archieve some results.
Please check the following codes.
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width:800px;">
<colgroup>
<col style="width:200px; background:#CCC"/>
<col style="width:100px; background: #666"/>
<col style="width:500px; background: #000"/>
</colgroup>
<thead>
<tr>
<th style="height:100px">head</th>
<th style="height:100px"> </th>
<th style="height:100px"> </th>
</tr>
</thead>
<tfoot>
<tr>
<td>foot</td>
<td> </td>
<td> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>body</td>
<td> </td>
<td> </td>
</tr>
</tbody>
You can adjust width of the any Column by changing the width of the <col style="width:200px;
. I just write the inline styles.
精彩评论