指定列的寬度和文本對齊

是否可以使用css指定表格列的寬度（以百分比表示）？也可以指定特定列的文本對齊方式嗎？指定列的寬度和文本對齊

例如我有一張有3列的表格。我想說

col1.width = 20% 
col2.width = 40% 
col3.width = 40% 

col1.text-align = left; 
col2.text-align = right; 
col3.text-align = center;

來源

2010-06-15 xkcd

你能做到這一點，但你的<td>寬度相對於此時父容器。

來源

2010-06-15 19:50:20 Babiker

我到底該怎麼做？我必須給每個td元素一個類嗎？或者將tds包裝在div中並指定div的寬度？哪種方法是正確的？ – xkcd 2010-06-15 19:58:46

關於第一個問題：創建您分配給每個col umn的類。相當簡單。

對齊文本有點難度，因爲您只能將few properties to table columns作爲一個整體進行分配。在這種情況下，一種解決方案是使用nth-child僞類，但這是CSS 3特定功能，不適用於任何當前版本的Internet Explorer。正如this answer提出的那樣，您也可以使用+組合器來設置相鄰列的樣式。這是一個CSS 2.1功能supported by IE >= 7。

<!DOCTYPE html> 
<head> 
<meta charset=UTF-8> 
<title>Column styling</title> 
<style> 
table { 
    table-layout: fixed; 
    width: 1000px; 
} 

.firstColumn { 
    width: 20%; 
    background: #ccc; 
} 

.otherColumns { 
    width: 40%; 
    background: #eee; 
} 

td  { text-align: left } 
td+td { text-align: right } 
td+td+td { text-align: center } 
</style> 
</head> 
<body> 
<table> 
    <col class="firstColumn"> 
    <col class="otherColumns"> 
    <col class="otherColumns"> 
    <tr> 
     <td>bla</td> 
     <td>bla</td> 
     <td>bla</td> 
    </tr> 
    <tr> 
     <td>bla</td> 
     <td>bla</td> 
     <td>bla</td> 
    </tr> 
    <tr> 
     <td>bla</td> 
     <td>bla</td> 
     <td>bla</td> 
    </tr> 
</table> 
</body> 
</html>

來源

2010-06-15 21:04:31

指定列的寬度和文本對齊

回答

相關問題