如何排隊TD的單元表的Th細胞是在中間（上邊界）下方

grid 如何排隊TD的單元表的Th細胞是在中間（上邊界）下方

我試圖創建this table layout。基本上，您在網格中看到的橙色18表示星期二上午11點至晚上12點之間使用率爲18％。所以這就是爲什麼沿着頂部的小時數最好在表格單元格的邊緣，而不是在單元格的中間。這樣它就會顯示錶示一小時時間範圍內的使用情況的數據。

我已經基本應用了基本的黑客，右對齊沿頂部的時間，使他們看起來有點像他們的插圖中的細胞。這並不完美，你可以看到。

我想要做的是實際上有幾個小時之間的數據細胞很好地居中。我想我可以用固定大小的列寬來完成，但是表格需要拉伸到100％的頁面寬度和列寬的百分比。然後它可以擴展到一個更小的瀏覽器。

有沒有辦法在HTML和CSS來做到這一點？

來源

2013-01-31 zuallauz

只需使用文本對齊：正確的頂部行和文本對齊：中心其他行。看起來就是這樣的形象。儘管如此，你可以添加一個例子html/css來獲得更清晰的例子。 – Omega

要使第一行真正居中在單個表格的底部單元格之間，您可以在不使用定位的情況下使用百分比的colspan + widths。這樣它將是流暢的，它將適用於任何字體，並且當你使用2位數字時它不會被搞亂。

HTML：

<table border="0" cellpadding="0" cellspacing="0"> 
    <tbody> 
     <tr> 
      <td>&nbsp;</td> 

      <th colspan="2">1</th> 

      <th colspan="2">1</th> 

      <th colspan="2">1</th> 

      <th colspan="2">1</th> 

      <th colspan="2">1</th> 

      <td>&nbsp;</td> 
     </tr> 

     <tr> 
      <td colspan="2">0</td> 

      <td colspan="2">0</td> 

      <td colspan="2">0</td> 

      <td colspan="2">0</td> 

      <td colspan="2">0</td> 

      <td colspan="2">0</td> 
     </tr> 
    </tbody> 
</table>

CSS：

table { 
    text-align: center; 
    width: 70%;  
    } 

table td { 
    width:8.33%; // 100% divided by (double the number of bottom cells) 
} 

table th { 
    width:16.66%; // 200% divided by (double the number of bottom cells) 
} 

table td[colspan="2"] { 
    background:yellow; 
} 

table td, 
table th { 
    outline:1px solid tan; 
}

演示：http://jsfiddle.net/G7KZe/

來源

2013-01-31 23:00:39

我喜歡這個，一個很好的乾淨的數學方法。謝謝！告訴我一件事，這是什麼神奇的'寬度：40px;'屬性呢？我以前從來沒有見過。 – zuallauz

不客氣。這是測試剩餘的。（我添加隨機字符到我想在測試xD時禁用的屬性）。我將更正以前的帖子。 –

是的，我試過評論它，它仍然工作，所以計算它可能是測試代碼。尼斯。你贏得了最好的解決方案，最乾淨的方法和流體佈局接受的答案！ – zuallauz

你總是可以包裝每個表的標題文本像<div>標籤和使用CSS position:relative和left:2px或任何像素數，使它看起來不錯。

例如

<table> 
    <tr> 
    <th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th> 
    </tr> 
</table>

來源

2013-01-31 22:23:01

爲什麼不只是風格的？ –

假設你有的風格，就像下劃線一樣......下劃線也會被調整到左邊，在這種情況下看起來很糟糕。 –

'left：5px;'完美！ – zuallauz

table td{ text-align:center;}

這將對準每個小區中心的文本。

來源

2013-01-31 22:25:07

你可以使用position: relative;將您的數字每個月要在那裏你想，但因爲表格單元格經常與CSS定位古怪的行爲很棘手。確切的定位可以取決於使用的字體。

我想出了一個需要2表的解決方案。這個想法是爲標題提供一個表格，爲內容提供一個表格。訣竅是在標題中有1個單元少於。

活生生的例子：http://jsfiddle.net/w6TnE/

正如你所看到的，這個月的數字是完全與邊框對齊。但請記住，這都需要一個固定寬度，在這種情況下，60像素：

td, th{ border:1px solid #ccc; padding:5px 0; text-align:center; width:60px;}

我只是增加了一些額外的造型，使之明確。

來源

2013-01-31 22:32:30 jgthms

是的，這很好，謝謝！我已經給馬里奧的答案，因爲他提出了一個很好的方式來實現我的問題最初要求的可變寬度。下次我需要一個固定寬度的方法時，我會記住你的方法。 – zuallauz

您可以在相對定位的元素內使用絕對定位的元素來獲得所需的效果。想法是用position: relative對<th>元素進行樣式設計，然後在position: absolute的元素中對小時數自身進行樣式設計。然後，您可以將數字放置在與單元相關的任何位置。

Here是一個例子的jsfiddle。要調整數字的位置，您可能需要使用塊中right屬性的像素值而不是百分比。

欲瞭解更多信息，你可能想了解不同的positioning methods。

來源

2013-01-31 22:38:27 potterbm

如何排隊TD的單元表的Th細胞是在中間（上邊界）下方

回答

相關問題