將td的高度設置爲文本的高度

我希望我的元素對齊頂部（表中的元素）。現在我有：將td的高度設置爲文本的高度

xxx yyy zzz 
    yyy 
qqq fff ggg

，我想：

xxx yyy zzz 
qqq yyy ggg 
    fff

代碼：

<html> 
<style type="text/css"> 
td {vertical-align:top;padding-right:30px;width:20px;} 
th tr {width:220px;} 
</style> 
<table border="0"> 
    <tbody> 
     <tr> 
      <th>header</th> 
      <th>header</th> 
      <th>header</th> 
     </tr> 
     <tr> 
      <td>td1</td> 
      <td>td2 bla bla bla bla bla bla blablablablablablablablablablabla</td> 
      <td>td3</td> 
     </tr> 
     <tr> 
      <td>td1</td> 
      <td>td2</td> 
      <td>td3</td> 
     </tr> 
    </tbody> 
</table> 
</html>

我有一個小提琴：the fiddle

在此先感謝

來源

2012-01-04 lmkk

無法定位... – PeeHaa 2012-01-04 16:55:26

我應該怎麼那麼做呢？放下桌子，做div的?? – lmkk 2012-01-04 17:02:29

查看我的回答:) – PeeHaa 2012-01-04 17:03:16

如果您對位於x/y位置的內容沒有打擾，那麼我猜這不是表格數據，因此您不應該使用表格。

所以我會建議使用DIV的和CSS來此內容

http://www.vanseodesign.com/css/3-column-css-layout/

來源

2012-01-04 17:01:01 Curt

它仍然可以是表格數據。特別是當我注意到有標題。 – PeeHaa 2012-01-04 17:02:46

這可能是列標題。像「最新消息」等。我從來沒有聽說過將表格數據轉移到上面的記錄，只是因爲它恰好是空的。 – Curt 2012-01-04 17:03:39

它可能不是表格數據，但您的假設是錯誤的。 'rowspan' /'colspan'是有原因:)。你也許是對的。 – PeeHaa 2012-01-04 17:04:44

這是不可能的（至少不是你設置它的方式）。

你不能'破壞'錶行。這只是表格的工作原理。

我能想到的唯一的事情就是使用rowspan，但我不知道這是否有助於您的具體情況。

http://jsfiddle.net/ws6Aj/1/

更新

也請注意Curt's answer是否應該使用一個表或不。

來源

2012-01-04 16:56:22 PeeHaa

使用'rowspan'是一個選項，但是你需要明確設置一行的高度。在這種情況下，'tr：first-child + tr {height：1.2em; }'會這樣做。值'1.2'應該被替換爲'line-height'的任何值（但是如果沒有設置值，'1.2'應該合理地工作）。 – 2012-01-04 17:07:50

@ JukkaK.Korpela什麼是「高度」？ – PeeHaa 2012-01-04 17:08:55

沒有'高度'設置瀏覽器可能會使行很高，以致在下一行之前有太多空間，與此處所需的渲染相比。 – 2012-01-04 18:12:13

您的手機內容是對齊頂部。您似乎想要向上移動第二行單元格中的某些內容。要實現這一點，請將內容移到第一行。

來源

2012-01-04 17:00:24

將td的高度設置爲文本的高度

回答

相關問題