How to prevent table-cell from expanding - html

Question

https://jsfiddle.net/pepgw4cz/1/
This is a typical article list scenario, every item has its image, title, introtext and created time. As you can see in the 2nd item, where the title is longer, the table exceeds its designated width. This could be easily solved by flex, but my client is using a 2011 laptop with IE9 and she wouldn't let go.
So I am stuck with table. The container's width is unknown(fit mobile screen) as well as the itemBody's width(actually, setting them to a fixed width doesn't change anything.), and the item Title has to be limited to one line(white-space:nowrap), which contributes to the problem.
Here is the codes, I copy it from my site so the structure looks a little wierd, but look at the fiddle and you will get the idea
<ul>
<li class="card " k2id="84">
<div class="moduleItemImageContainer">
<a class="moduleItemImage">
</a>
</div>
<div class="moduleItemBody">
<div class="moduleItemBodyContainer">
<span class="moduleItemDateCreated">2016-06-11</span>
<a class="moduleItemTitle">Norm</a>
<div class="moduleItemIntrotext">
人民大会堂国庆宴会的细节 </div>
</div>
</div>
</li>
<li class="card " k2id="83">
<div class="moduleItemImageContainer">
<a class="moduleItemImage">
</a>
</div>
<div class="moduleItemBody">
<div class="moduleItemBodyContainer">
<span class="moduleItemDateCreated">2016-06-11</span>
<a class="moduleItemTitle">Looooooooong Title Long titleLooooooooong Title Long titl</a>
<div class="moduleItemIntrotext">
人民大会堂国庆宴会的细节 </div>
</div>
</div>
</li>
</ul>
<style>
li {
width: 100%;
list-style: none;
display: table;
margin-bottom: 16px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8)
}
li>* {
display: table-cell;
vertical-align: top
}
div.moduleItemImageContainer{width:1%}
a.moduleItemImage {
display: block;
background-image: url('http://placehold.it/100x100');
width: 100px;
height: 100px;
}
a.moduleItemTitle{white-space:nowrap;overflow:hidden;display:block}
div.moduleItemBody {
padding: 16px;
}
div.moduleItemBodyContainer{
height:68px;overflow:hidden
}
span {
float: right
}
ul {
width: 500px
}
</style>
So, how to prevent table from behaving like this?

Answer 1

just give your div.moduleItemBody a max-width:1px; DEMO
and if you want your title to break in multiple lines if it is too long then remove white-space: nowrap; from a.moduleItemTitle DEMO

Answer 2

<table style='table-layout:fixed'>

Answer 3

For those who use bootstrap, please you can add a class class="text-wrap" on the cells.
This will automatically give the required width to the table cells according to the data its holding.