开发者

Table's td with specified height doesn't work the same way on different browsers

开发者 https://www.devze.com 2023-04-09 04:39 出处:网络
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;

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">&nbsp;</th>
        <th style="height:100px">&nbsp;</th>
      </tr>
    </thead> 
    <tfoot> 
      <tr>
        <td>foot</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tfoot> 
    <tbody>
      <tr>
        <td>body</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号