製作TD合同，只有它的填充和內容

我有一個表安排是這樣的：製作TD合同，只有它的填充和內容

<table style="width:100%" class="ui-widget-content"> 
    <tr> 
     <td rowspan="2" style="width:100px;padding:10px"> 
     </td> 
     <td style="padding:5px"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
</table>

我希望它看起來像這樣在填充一些內容（對不起，壞的ASCII藝術）：

----------------------- 
|  |    | 
|  |---------------| 
|  |    | 
|  |    | 
|  |    | 
-----------------------

但是它看起來像這樣：

----------------------- 
|  |    | 
|  |    | 
|  | --------------| 
|  |    | 
|  |    | 
-----------------------

我做高度：在頂部有一個1％，但它不能在IE瀏覽器，所以我looki ng以減少haxxy的方法。

有什麼建議嗎？

編輯：

下面是我使用與PHP的實際代碼留在：

<table style="width:100%" class="ui-widget-content"> 
    <tr style="height:1px"> 
     <td class="ui-widget-header" rowspan="2" style="width:100px;padding:10px"> 
      <?= "<img src='/userPictures/$img.png' style='width:100%;height:100%'/>" ?> 
     </td> 
     <td class="ui-widget-header" style="padding:5px"> 
      <?= $profileDetails['name']; ?> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <?= stripslashes($wP['Text']); ?> 
     </td> 
    </tr> 
</table>

來源

2011-10-06 Ashley Davies

您需要設置height上tr。

試試這個

table{ 
    height:300px; 
    border:1px solid red; 
    border-collapse:collapse; 
} 

tr{ 
    height:200px; 
    border:1px solid red; 
    border-collapse:collapse; 
} 

tr.top{ 
    height:100px; 
    border:1px solid red; 
    border-collapse:collapse; 
} 

tr td{ 
    border:1px solid red; 
    border-collapse:collapse; 
}

例子：http://jsfiddle.net/U3JYX/

來源

2011-10-06 21:43:41

不幸的是，與其他答案相同的問題。我向左邊的單元格添加了一個圖像，右上角的單元格隨機拉伸。我點擊運行，但我從來沒有使用jsFiddle，所以我不知道它是否爲每個人或只是我保存。 –

用jsfiddle保存，點擊更新。網址將會更新，您可以與我們分享。至於圖片的問題，請嘗試更改CSS中的「高度」。 –

http://jsfiddle.net/U3JYX/3/ –

添加style="height:100%;"到底行（tr標籤）。

<html> 
<head> 
<style> 
    html { 
     height: 100%; 
    } 
    body { 
     height: 100%; 
    } 
    table tr td { 
     border: 1px solid black; 
    } 
    table { 
     height: 400px; 
    } 
</style> 
</head> 
<body> 
    <table style="width:100%" class="ui-widget-content"> 
     <tr> 
      <td rowspan="2" style="width:100px; padding:10px">&nbsp;</td> 
      <td style="padding:5px;">Some text</td> 
     </tr> 
     <tr style="height:100%;"> 
      <td>&nbsp;</td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2011-10-06 21:20:56

沒有不幸的是解決問題。相同的結果。感謝您的回答。 –

你確實需要設置html，body和table本身的寬度。它肯定會給你想要的結果。我已經更新了答案，給你完整的代碼。確定地測試它。 –

這是在一個設置寬度的div（編輯：我使用Firefox和IE9，它沒有顯示在任何一個。你使用谷歌Chrome？） –

製作TD合同，只有它的填充和內容

回答

相關問題