TD寬度，不工作？

所以我有這樣的代碼在這裏：TD寬度，不工作？

<table> 
    <tr> 
     <td width="200px" valign="top"> 
      <div class="left_menu"> 
       <div class="menu_item"> 
        <a href="#">Home</a> 
       </div> 
      </div> 
     </td> 
     <td width="1000px" valign="top">Content</td> 
    </tr> 
</table>

與CSS

.left_menu { 
    background: none repeat scroll 0 0 #333333; 
    border-radius: 5px 5px 5px 5px; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 5px; 
} 

.menu_item { 
    background: none repeat scroll 0 0 #CCCCCC; 
    border-bottom: 1px solid #999999; 
    border-radius: 5px 5px 5px 5px; 
    border-top: 1px solid #FFFFCC; 
    cursor: pointer; 
    padding: 5px; 
}

它可以在我的瀏覽器很好，我已經在每個瀏覽器Mac和PC的測試，但有人抱怨td與width爲200不斷變化的寬度。我不知道他在說什麼。有誰知道他或她在td上看到寬度變化的原因嗎？

來源

2012-06-18 user979331

那麼，如何才能幫助時，我們有投訴是關於什麼的就更少了主意？我們甚至無法測試真實頁面，也沒有關於某人和他或她的瀏覽環境的信息。 –

它應該是：

<td width="200">

或

<td style="width: 200px">

請注意，如果你的包含一些內容不適合入200像素（像somelongwordwithoutanyspaces），細胞將仍然伸展，除非你的CSS包含表格table-layout: fixed。

編輯

隨着孩子的克里斯蒂娜在她的回答指出，應避免同時width屬性，並使用內聯CSS（與style屬性）。儘可能分離風格和結構是一種很好的做法。

來源

2012-06-18 20:28:56 bfavaretto

謝謝bfavaretto ...現在嘗試 – user979331

+28

該表應該是'table-layout：fixed;'>' – user979331

@ user1193385，是的，就是這樣。但如果可能，請避免使用內聯css。 – bfavaretto

您無法指定表中width/height屬性的單位;這些總是以像素爲單位，但不應該使用它們，因爲它們已被棄用。

來源

2012-06-18 20:29:18 lanzz

表格中的寬度和/或高度不再標準;正如Ianzz所說，他們已被棄用。相反，要做到這一點的最好辦法是讓你的表格單元格塊元素，將單元格打開抱到你想要的大小：

<table> 
    <tr> 
     <td valign="top"> 
      <div class="left_menu"> 
       <div class="menu_item"> 
        <a href="#">Home</a> 
       </div> 
      </div> 
     </td> 
     <td valign="top" class="content">Content</td> 
    </tr> 
</table>

CSS

.content { 
    width: 1000px; 
} 

.left_menu { 
    background: none repeat scroll 0 0 #333333; 
    border-radius: 5px 5px 5px 5px; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 5px; 
    width: 200px; 
} 

.menu_item { 
    background: none repeat scroll 0 0 #CCCCCC; 
    border-bottom: 1px solid #999999; 
    border-radius: 5px 5px 5px 5px; 
    border-top: 1px solid #FFFFCC; 
    cursor: pointer; 
    padding: 5px; 
}

來源

2012-06-18 20:43:52

不幸的是，電子郵件技術比現有的HTML規範落後了許多年，在這種情況下，表格和內聯css是可悲的，不可避免的。 – MikeTheLiar

沒有人在談論html電子郵件，這是基本的桌面網頁瀏覽。但是，是的，對於電子郵件表和內聯CSS是構建它們的唯一方法。謝謝你，微軟... –

我只會提出電子郵件，因爲這是我帶來的。我在電子郵件中遇到了同樣的問題。 – MikeTheLiar

嘗試使用

word-wrap: break-word;

希望得到這個幫助

來源

2012-12-30 17:39:27 Med7at

請注意，調整thead中列的寬度將影響t他整個表

<table> 
    <thead> 
     <tr width="25"> 
      <th>Name</th> 
      <th>Email</th> 
     </tr> 
    </thead> 
    <tr> 
     <td>Joe</td> 
     <td>[email protected]</td> 
    </tr> 
</table>

在我的情況下，thead> tr的寬度直接覆蓋表> tr> td上的寬度。

來源

2014-03-28 05:44:10