有人可以解釋我有這個表的CSS問題嗎？

有人可以解釋爲什麼表的內容的寬度都是不同的。另外，有沒有辦法讓所有的寬度都是一樣的。有人可以解釋我有這個表的CSS問題嗎？

通過內容我的意思是 '項目'， '價格'， '量'， '小計'

HTML

<div id="cart_items"> 
<table class="ty-cart-content ty-table"> 
    <thead> 
      <tr> 
       <th class="ty-cart-content__title ty-items">Item</th> 
       <th class="ty-cart-content__title ty-left">Price</th> 
       <th class="ty-cart-content__title quantity-cell">Quantity</th> 
       <th class="ty-cart-content__title ty-price">Subtotal</th> 
      </tr> 
    </thead> 
</table>

CSS

div { 
    color: #333; 
    font-family: 'Roboto', sans-serif; 
    font-size: 13px; 
    font-style: normal; 
    font-weight: normal; 
} 

div#cart_items { 
    border-top: 1px solid #e7e7e7; 
    border-bottom: 1px solid #e7e7e7; 
} 

.ty-table { 
    width: 100%; 
} 

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

https://jsfiddle.net/uwfosLgp/

來源

2015-09-18 Grant9196

實際上表細胞的'height'如下「水平」和「寬度」垂直，在你的情況下，你還沒有給''定義任何寬度， uming自動分配'寬度'爲平等分配，你可以去'>'或者可以寫'CSS'。或者作爲@SergeS解釋你可以去'table-layout：fixed'屬性在你的情況下非常有用。 – vivekkupadhyay

要確保所有列的寬度相同（不知道它們的數量），可以使用table-layout: fixed。然後，渲染器會忽略內容的大小，並將渲染相同寬度的所有列（或者，如果你設置寬度，也不會允許它通過內容改變）

這是你更新的例子

https://jsfiddle.net/Lmdn8xp5/

編輯：我沒有看到第二個結果與添加寬度有 - 所以有完整的答案，第二個選項是寬度添加到所有列（以頭爲例）

來源

2015-09-18 09:12:41 SergeS

有人可以解釋我有這個表的CSS問題嗎？

回答

相關問題