css中table-layout:fixed為什麼表格大小會改變?

來源:互聯網
上載者:User
第一次開啟

顯示正確

點擊刪除後

表格變小了。

這是為什嗎?
訂單資源回收筒是一個固定大小的層下面是表格(tablesorter)

<div class="tableHeader" style="width:928px">訂單資源回收筒</div>                <table class="tablesorter" cellspacing="1" style="word-break:break-all;table-layout:fixed;">                    <thead>                        <tr>                            <th style="width:40px;">選擇</th>                            <th style="width:100px;">品名</th>                            <th style="width:70px;">照片</th>                            <th style="width:80px;">訂貨時間</th>                            <th style="width:90px;">顏色</th>                            <th style="width:50px;">數量</th>                            <th style="width:60px;">單價</th>                            <th style="width:60px;">總價</th>                            <th style="width:100px;">生產狀態</th>                               <th style="width:100px;">備忘</th>                               <th style="width:80px;">客戶</th>                                                         </tr>                   </thead>                   <tbody>                                                       <tr>                       <td><input name="chk_list" type="checkbox" value='2134' /></td>                       <td>DP-TA-88</td>                       <td><a href='../PriceList/bigPhoto/DP-TA-88.jpg' class='highslide' onclick='return hs.expand(this)'>                       <img src='../PriceList/smallPhoto/DP-TA-88.jpg' alt='照片' onerror=this.src='../images/noPhoto.png' onload='ReSizeImage(this,70,70);'></a>                       </td>                       <td>2011/9/19<br /><font color="#FF0000">2011/9/19</font><br />剩 -1天</td>                       <td></td>                       <td>1</td>                       <td>0</td>                       <td>0</td>                        <td></td>                       <td></td>                       <td>世貿其他</td>                   </tr>                                                    </tbody>                </table>

瀏覽器問題麼?

table的寬度最好這樣設定: width="500" =>style="width:500px;" 瀏覽器支援反而更高

最好把table也設個width="928"

你有沒有發現你在table裡邊就設定了width寬度,從來就沒設定一下高度,當你表格裡邊顯示內容的時候,表格會隨著裡邊的文字、圖片而撐大,一旦刪除了資訊表格又恢複到了原來的大小,你應該固定table和table裡邊每一個儲存格的高度和寬度。

<style type="text/css">th{height:50px}td{height:100px}  </style> </HEAD> <BODY>  <div class="tableHeader" style="width:928px;background-color:red">訂單資源回收筒</div>                <table border="1" class="tablesorter" cellspacing="1" style="word-break:break-all;table-layout:fixed;width:928px">                    <thead>                        <tr>                            <th style="width:40px;">選擇</th>                            <th style="width:100px;">品名</th>                            <th style="width:70px;">照片</th>                            <th style="width:80px;">訂貨時間</th>                            <th style="width:90px;">顏色</th>                            <th style="width:50px;">數量</th>                            <th style="width:60px;">單價</th>                            <th style="width:60px;">總價</th>                            <th style="width:100px;">生產狀態</th>                               <th style="width:100px;">備忘</th>                               <th style="width:80px;">客戶</th>                                                         </tr>                   </thead>                   <tbody>                                                      <tr>                       <td><input name="chk_list" type="checkbox" value='2134' /></td>                       <td>DP-TA-88</td>                       <td><a href='../PriceList/bigPhoto/DP-TA-88.jpg' class='highslide' onclick='return hs.expand(this)'>                       <img src='../PriceList/smallPhoto/DP-TA-88.jpg' alt='照片' onerror=this.src='../images/noPhoto.png' onload='ReSizeImage(this,70,70);'></a>                       </td>                       <td>2011/9/19<br /><font color="#FF0000">2011/9/19</font><br />剩 -1天</td>                       <td></td>                       <td>1</td>                       <td>0</td>                       <td>0</td>                        <td></td>                       <td></td>                       <td>世貿其他</td>                   </tr>                                                   </tbody>                </table> </BODY>

前面也有人提到了,div設定了寬度,table也最好設定一下,然後th和td都要設定一個固定的高度,看情況而定。。我給div加了顏色只是為了讓你能更清晰的看到div和table的寬度是一樣的,待會你刪掉就ok了。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.