Q

不能讓表格單元格均勻展開

2016-03-24 110 views 1 likes

1

我試圖讓我的表格均勻地展開每個單元格，但不會在濃縮時重疊。我的CSS是不能讓表格單元格均勻展開

table.basic { 
    border-collapse: collapse; 
    border: 0px solid black; 
    width: 100%; 
}

和我的HTML是

<table class="basic" style="white-space: nowrap"> 
    <tr> 
    <th>Hex</th> 
    <th>RGB</th> 
    <th>HSL</th> 
    </tr> 
    <tr> 
    <td id="colorhexDIV"></td> 
    <td id="colorrgbDIV"></td> 
    <td id="colorhslDIV"></td> 
    </tr> 
</table>

現在他們不重疊，但他們都不在中心

如果我添加那麼他們居中，但重疊

我也試圖避免纏繞，像這樣

如何居中，並保持細胞重疊？

2016-03-24 SirParselot

+0

我創造了你提供的代碼的小提琴表的元素之一，我無法重現，你能準備一個演示嗎？ – Blindsyde

+0

@Noctane我添加了table-layout：固定到table.basic類，使它們重疊並居中。該代碼完全不能完全重現問題。 – SirParselot

A

回答

1

你必須從你的HTML刪除white-space: nowrap，然後你可以使用width: 33%

table.basic { 
 
    border-collapse: collapse; 
 
    border: 0px solid black; 
 
    width: 100%; 
 
} 
 

 
th,td { 
 
    width: 33.3%; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
}

<table class="basic"> 
 
    <tr> 
 
    <th>Hex</th> 
 
    <th>RGB</th> 
 
    <th>HSL</th> 
 
    </tr> 
 
    <tr> 
 
    <td id="colorhexDIV">Text</td> 
 
    <td id="colorrgbDIV">Text</td> 
 
    <td id="colorhslDIV">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ex alias nihil minus labore perspiciatis maiores porro quas eius provident expedita, dolore obcaecati officiis consectetur quidem, animi aperiam exercitationem est.</td> 
 
    </tr> 
 
</table>

2016-03-24 17:38:33

+0

工作。我嘗試過，但我想我讓課程錯了或什麼。謝謝！ – SirParselot

+0

我只注意到你的HTML中有'style =「white-space：nowrap」'這是個問題。我更新了我的答案，我認爲這就是你要找的。 –

+0

我仍然在HTML中，它工作正常。我只是重複了'td，th'這個類，它運行良好。我有'tr.basic，td.basic'並將其改爲'.basictr' – SirParselot

0

居中單元格的內容使用文本對齊風格。 style =「text-align：center;」表datacell的內容將根據它們內部的內容嘗試使用div或跨度並將其設置爲固定大小以擴展所有內容的長度。

2016-03-24 17:41:21 James

+0

我認爲你誤解了我的問題，或者我誤解了你的答案，但我試圖讓細胞均勻間隔橫跨整個寬度，當我摺疊表格時，保持單元格不重疊 – SirParselot

0

您可以使用table-layout: fixed停靠表，並根據其內容從上漿的孩子和寬度設置爲

2016-03-24 17:42:40

+0

這有助於將所有內容集中在一起，但是當我摺疊表格時它會導致單元格重疊。 – SirParselot

相關問題