Question

有人可以解释为什么表格内容的宽度都不同。还有，有一种方法可以使所有的宽度都相同。

按内容我的意思是'商品'，'价格'，'数量'，'小计'

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/

Answer 1

要确保所有列的宽度相同（不知道其数量），您可以使用table-layout: fixed。然后渲染器将忽略内容的大小，并将渲染所有具有相同宽度的列（或者如果您设置宽度，则不允许其按内容更改）

这是您更新的示例

https://jsfiddle.net/Lmdn8xp5/

编辑：我没有看到添加宽度的第二个结果 - 所以要有完整的答案，第二个选项是为所有列添加宽度（例如，到标题）

有人可以解释一下这个CSS我遇到的问题吗？

1 个答案: