Tablo hücrelerini eşit bir şekilde genişletemezsiniz

Question

Tablomu her hücreyi eşit bir şekilde genişletmeye çalışıyorum ancak yoğunlaştıkça çakışma yapmam. Benim css

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

ve benim html onlar örtüşmeyen ama sonra onlar ortalanır eklemek ama

çakışırsa onlar

ortalanmıyorsa şu anda

<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> 

olduğunu

Ben de bunu ortalamak ve örtüşen hücreleri tutmak nasıl bu kadar

gibi sarma önlemek için çalışıyorum?

Answer 1

Sen HTML den white-space: nowrap kaldırmak zorunda ve sonra text-align stili kullanan hücrenin içeriğini ortalamak için 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>

Answer 2

kullanabilirsiniz. style = "text-align: center;" Tablo veri hücresinin içeriği, iç kısımlarının bir div veya span kullanmayı denediğine ve tüm içeriği aynı uzunlukta olacak şekilde sabit bir boyuta ayarlamaya bağlı olarak genişler.

Answer 3

Tabloyu durur table-layout: fixed kullanabilir ve onların içeriğine göre boyutlandırma çocukları ve ben verdiğiniz kod keman yarattı