title: How to prevent table-cell from expanding
body: <p><a href="https://jsfiddle.net/pepgw4cz/1/" rel="nofollow">https://jsfiddle.net/pepgw4cz/1/</a></p>
  
  <p>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 <code>flex</code>, but my client is using a 2011 laptop with IE9 and she wouldn't let go.</p>
  
  <p>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(<code>white-space:nowrap</code>), which contributes to the problem.</p>
  
  <p>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</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="card " k2id="84"&gt;
      &lt;div class="moduleItemImageContainer"&gt;
        &lt;a class="moduleItemImage"&gt;
  
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="moduleItemBody"&gt;
        &lt;div class="moduleItemBodyContainer"&gt;
          &lt;span class="moduleItemDateCreated"&gt;2016-06-11&lt;/span&gt;
          &lt;a class="moduleItemTitle"&gt;Norm&lt;/a&gt;
          &lt;div class="moduleItemIntrotext"&gt;
            人民大会堂国庆宴会的细节 &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  
    &lt;li class="card " k2id="83"&gt;
      &lt;div class="moduleItemImageContainer"&gt;
        &lt;a class="moduleItemImage"&gt;
  
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="moduleItemBody"&gt;
        &lt;div class="moduleItemBodyContainer"&gt;
          &lt;span class="moduleItemDateCreated"&gt;2016-06-11&lt;/span&gt;
  
          &lt;a class="moduleItemTitle"&gt;Looooooooong Title Long titleLooooooooong Title Long titl&lt;/a&gt;
        &lt;div class="moduleItemIntrotext"&gt;
            人民大会堂国庆宴会的细节 &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;style&gt;
  li {
    width: 100%;
    list-style: none;
    display: table;
    margin-bottom: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8)
  }
  
  li&gt;* {
    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
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>So, how to prevent table from behaving like this?</p>