我怎樣才能使多個HTML表具有相同的列寬

我有多個HTML表。每個表格具有相同的列數，但每個單元格中具有不同的數據集。我怎樣才能使多個HTML表具有相同的列寬

<table><tr> 
    <td>Col 1 Table 1</td> 
    <td>Col 2 Table 1</td> 
    <td>Col 3 Table 1</td> 
</tr></table> 

<table><tr> 
    <td>Col 1 Table 2</td> 
    <td>Col 2 Table 2</td> 
    <td>Col 3 Table 2</td> 
</tr></table>

我想弄清楚到具有跨越這些表（這樣，每個第一列中，每個第二列，等等）的每個可比列具有相同的寬度，以便所有的表的排隊完美的最簡單的方法。

由於某些特定原因，我無法將它們合併到一個表中，所以我想查看是否有多個表。

看起來像表格（不管我放入的任何CSS）是根據單元格中的數據進行更改的。

有什麼建議嗎？

來源

2011-04-06 leora

你給所有'td'的寬度嗎（*但是不要給表格寬度）？ – 2011-04-06 15:14:34

對於大多數靈活性我會提供它自己的類中的每個列。

CSS

.column-1 { 
    width: 100px; 
} 
.column-2 { 
    width: 300px; 
} 
.column-3 { 
    width: 225px; 
}

HTML

<table><tr> 
    <td class="column-1">Col 1 Table 1</td> 
    <td class="column-2">Col 2 Table 1</td> 
    <td class="column-3">Col 3 Table 1</td> 
</tr></table> 

<table><tr> 
    <td class="column-1">Col 1 Table 2</td> 
    <td class="column-2">Col 2 Table 2</td> 
    <td class="column-3">Col 3 Table 2</td> 
</tr></table>

如果您在使用CSS3，你也可以使用第n個孩子選擇實現這一目標這將減少對HTML你的量的奢華我需要寫。

來源

2011-04-06 15:29:08

我敢肯定，隨着css你可以這樣做：

td { width: 200px }

來源

2011-04-06 15:14:25 vbence

將固定寬度的<td>元素應該工作。如果它不適合你，也許有一種風格重寫你指定的風格，或者你的CSS中有語法錯誤。你忘記了單位（例如px，em）嗎？使用Firebug（或類似的工具）來確定正在應用/覆蓋哪些樣式。一般情況下，類似這樣的東西應該工作：

td { 
    width: 200px; 
}

我不知道如果這是你的代碼是可行的，但另一種選擇是用多種<tbody>元素指定一個表。像這樣：

<table> 

<tbody><tr> 
    <td>Col 1 Table 1</td> 
    <td>Col 2 Table 1</td> 
    <td>Col 3 Table 1</td> 
</tr></tbody> 

<tbody><tr> 
    <td>Col 1 Table 2</td> 
    <td>Col 2 Table 2</td> 
    <td>Col 3 Table 2</td> 
</tr></tbody> 

</table>

出現在你的2個表之間的任何標記也需要成爲更大表的一部分。如果需要，您可以將該內容放置在僅包含一行和一個單元格的第3個<tbody>元素中。再說一遍，我不確定你的代碼庫如何適應這種重構，但我將它作爲一個選項放在那裏。

來源

2011-04-06 15:14:57 Asaph

使用多個''和''元素在我的情況下工作。 ''元素上的一些創造性的CSS樣式允許各部分之間的虛擬空間使得它們看起來像獨立表格，但所有列現在排成一列。 – Zarepheth 2015-02-09 17:34:36

通過爲每個表格提供三個''元素，一個用於間隔符，一個用於標題，另一個用於傳統列標題來完成創意CSS。 – Zarepheth 2015-02-09 17:35:53

在表格加載後嘗試使用javascript。

來源

2011-04-06 15:15:21 tomsv

如果你甚至沒有指出一個資源如何做到這一點，這並不是那麼有用。 – Pureferret 2015-02-21 15:22:09

你如何使用CSS樣式？您應該將固定寬度設置爲每個表格的第一行中的單元格。

<table> 
    <tr> 
    <td style="width:100px"></td> 
    <td style="width:120px"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table>

編輯：當然最好使用css類，但是一旦你會看到它是否適合你，你可以改變它。

<table> 
    <tr> 
    <td class="c1"></td> 
    <td class="c2"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table> 
<!-- ... --> 
<table> 
    <tr> 
    <td class="c1"></td> 
    <td class="c2"></td> 
</tr> 
<tr> 
    <td></td> 
    <td></td> 
</tr> 
</table>

等。

來源

2011-04-06 15:17:00 Damb

我怎樣才能使多個HTML表具有相同的列寬

回答

相關問題