CODEWITHSUNDEEP
htmlcss
shenkwen
shenkwen

Reputation: 3880

How to prevent table-cell from expanding

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?

Upvotes: 3

Views: 2084

Answers (3)

Paul Chu
Paul Chu

Reputation: 54

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

Upvotes: 1

Kulaba Brian Austin
Kulaba Brian Austin

Reputation: 339

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.

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

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

Upvotes: 1

Related Questions