50% width two columns css

Question

Given the table below:

<table width="100%">
  <tr>
    <td id="td1"></td>
    <td id="td2"></td>
    <td id="td3"></td>
    <td id="td4"></td>
  </tr>
</table>

Could anybody tell me how I can keep td1 auto-fit the content, but make the width of td1 + td2 = 50% width of the parent?

tables inherently auto expand, it's better to use div if you want to restrict the width — digital-pollution, Mar 07 '19 at 15:03
What do you do if td1+td2 is more than 50% width of the parent? Overflow? wrap? cut off? What if td1 is already more than 50% the width of the parent on its own? — TylerH, Mar 07 '19 at 15:03
Pretty sure that is impossible with CSS alone, you’d need to involve JS if you want something like that. — 04FS, Mar 07 '19 at 15:14
Actually I haven't even thought about this, looks like this isn't a good question. Thanks for your comments. I'll try other ways. — flin227, Mar 07 '19 at 15:20
@MatthewVarga I'd hope td3 be same with td1, and td4 be same with td2. — flin227, Mar 07 '19 at 15:31

Matt · Accepted Answer · 2019-04-11T13:48:04.133

As you say you have full control over the markup, I would suggest using div and display: flex;, rather than table. Using JS seems a little overkill imo. (N.B. IE11 limitation)

I've set up a brief example of what may help you get started but I'm not 100% on the behaviour you want td2 & td4 to take.

However, if you want to set a max width for those elements, you can use something like this:

#td2 {
    flex-grow: 0; /* do not grow   - initial value: 0 */
    flex-shrink: 0; /* do not shrink - initial value: 1 */
    flex-basis: 200px; /* width/height - initial value: auto */
}

and have:

#td1 { 
    flex-grow: 1; 
}

This will allow #td1 to auto-fill the space, but leave 200px for #td2.

As a general note, I would also advise using classes, rather than IDs, when using CSS.

Link to Codepen

Hope that helps! Good luck.

div {
  border: 1px solid #000; 
}
#r { 
  display: flex;
}
.contain {
  display: flex;
  width: 50%;
}

<div id="r">
  <div class="contain">
    <div id="td1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </div>
    <div id="td2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
  <div class="contain">
    <div id="td3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
    <div id="td4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
</div>

Thank you so much! That's really what I want. Actually I had a similar approach. I have to accept this answer. Sorry @Matthew, I should have made my requirement more clear. Anyway, thanks for your effort as well. — flin227, Mar 12 '19 at 14:52

50% width two columns css

1 Answers1