How To Make Table Cell Expand Based On Content
I want to put 3 divs next to a table. The table should expand based on the content inside, and the 3 divs should equally take up the spare space left over. And I need the divs to s
Solution 1:
Set white-space: nowrap
for td
in order to get the entire text in one line.
/* Do this on tablet size and up */
@media (min-width: 481px) {
/* Main outer div of helper items AND subtotals */
.cart-collaterals {
display: inline-flex;
}
/* Outer div of helper items */
.cart-helper-outer {
order: -1;
display: inline-flex;
justify-content: space-around;
}
/* Helper item width */
.cart-helper-inner {
max-width: 25%;
}
/* Helper item font */
.cart-helper-inner p {
text-align: center;
}
}
td{
white-space: nowrap;
}
<div class="cart-collaterals">
<div class="cart_totals">
<table class="shop_table" cellspacing="0">
<tbody>
<tr class="cart-subtotal">
<th>Subtotal</th>
<td data-title="Subtotal">$ 348</td>
</tr>
<tr class="shipping">
<th>Shipping</th>
<td data-title="Shipping">
The table should expand so that this is one line of text
</td>
</tr>
<tr class="order-total">
<th>Total</th>
<td data-title="Total">$ 348</td>
</tr>
</tbody>
</table>
</div>
<div class="cart-helper-outer">
<div class="cart-helper-inner">
<p>This is some text. Blah blah blah. Here is some text.</p>
</div>
<div class="cart-helper-inner">
<p>This is some text. Blah blah blah. Here is some text.</p>
</div>
<div class="cart-helper-inner">
<p>This is some text. Blah blah blah. Here is some text.</p>
</div>
</div>
</div>
Post a Comment for "How To Make Table Cell Expand Based On Content"