CSS表格佈局

Question

我有一個3列的HTML表格和每列中的文本數量是可變的。我想在表格佈局上設置一些規則，但我不知道如何在CSS中做到這一點。

Title | Author | Publisher 

默認比例爲每列50％，25％，25％。我們的目標是儘可能將所有內容保持在一條線上。作者和發佈者列有更高的優先權，將單列爲標題欄。

更新：問題是當文本的數量超過單行的寬度。

Answer 1

您需要將百分比更改爲定義的寬度（px）。定義表格的寬度，並給每個<TD>自己的寬度定義一起等於表格的寬度。最好的辦法是爲兩者創建一個CSS類，然後將該類分配給每個元素。像這樣的東西，顯然非常一般。

.table{ 
    width:500px; 
} 

.tablecell_1{ 
    width:200px; 
} 

.tablecell_2{ 
    width:200px; 
} 

.tablecell_3{ 
    width:100px; 
} 

<table class="table"> 
    <tr> 
    <td class="tablecell_1"> 
    </td> 
    <td class="tablecell_2"> 
    </td> 
    <td class="tablecell_3"> 
    </td> 
    </tr> 
</table> 

Answer 2

您可以爲每個列創建一個類。

<th class="title">Title</th> 
<th class="author">Author</th> 
<th class="publisher">Publisher</th> 

然後讓每個人的CSS具體。

.title{ 
} 

.author{ 
} 

.publisher{ 
} 

Answer 3

定義一個寬度爲表，然後在<td>標記添加一類具有`寬度：汽車;

.table{ 
    width:900px; 
} 

.cell{ 
    width:auto; 
} 

在這裏，你的表

<table class="table"> 
    <tr> 
    <td class="cell"> 
    </td> 
    <td class="cell"> 
    </td> 
    <td class="cell"> 
    </td> 
    </tr> 
</table> 

讓我現在如果這就是你希望