CODEWITHSUNDEEP
htmlcss
Grant9196
Grant9196

Reputation: 139

Can someone explain this table CSS issue I'm having?

Can someone explain why the widths of the contents of the table are all different. Also, is there a way to make is so all the widths are the same.

By contents I mean 'items', 'price', 'quantity', 'subtotal'

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/

Upvotes: 0

Views: 60

Answers (1)

SergeS
SergeS

Reputation: 11779

To make sure that all columns are same width (Without knowing their count) you can use table-layout: fixed . Then renderer will ignore size of contents, and will render all columns with same width (Or if you set width, it won't allow it to be changed by content)

Here is your updated example

https://jsfiddle.net/Lmdn8xp5/

EDIT: I don't see second result with adding widths there - so to have complete answers, second option is to add widths to all columns (To the header for example)

Upvotes: 5

Related Questions