CODEWITHSUNDEEP
htmlcss
TinyTiger
TinyTiger

Reputation: 2063

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 stack under the table on mobile view like so...

Desktop:
[div-1] [div-2] [div-3] [table]

Mobile:
[table]
[div-1]
[div-2]
[div-3]

I've been playing around with Flex to get it working, but I can't make the table expand based on the content inside.

And I cannot use td {white-space: nowrap;} because on mobile it pushes the text out of the side of the screen. I need the table to expand based on the content inside, but the content shouldn't be forced outside of the screen. It need to wrap around on smaller screens like normal.

Here is an example of my work: http://codepen.io/anon/pen/qadbkK?editors=1100

/* 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;
  }
}
<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>

Upvotes: 3

Views: 8682

Answers (1)

z0mBi3
z0mBi3

Reputation: 1544

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>

Upvotes: 5

Related Questions