CODEWITHSUNDEEP
htmlcss
Sasi Dhivya
Sasi Dhivya

Reputation: 501

Providing border-collapse to collapse affects overflow hidden

I am creating the group button using ul li. In order to float the li in ul, i have set display:table value to ul and display:table-cell to li elements. Li elements has span and div nodes which is used to append the text/icon with In this.

This works fine.

But if I set border-collapse:collapse to table, width:100% concept not works as expected. If i give more text in a span (inside li), li width gets increased instead of wrapping into given space. I have set width:100% to ul where its parent div has 300px. Tried by setting overflow hidden but no use

This overflow problem gets resolved if I set to border-collapse:separate but I don't want double thick border(for each border 1px) with my li elements. So please provide any solution to wrap the text inside li, even if I provide more content with border-collapse:collapse. Else suggest any option to with border-collapse:separate with no double border.

Here is my plunker

https://plnkr.co/edit/th0ylX4dccZmoSeURk77?p=preview

Thanks

Upvotes: 2

Views: 1217

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

You would better to use flex for your task. Add display: flex to container and flex: 1 1 auto to li elements. flex: 1 1 auto means that this element takes all available space.

Another example: http://jsfiddle.net/w23nuqvx/.

.table_ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  
  -webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
  
  width: 300px;
  
  -ms-flex-wrap: wrap;  
      flex-wrap: wrap;
  /* flex-wrap: nowrap; disabling wrapping*/
  
  list-style: none;
}

.cells_li {
  -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
  
  border-top: 1px solid red;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
  
  padding: .5em;
  text-align: center;
}

.cells_li:last-child {
  border-right: 1px solid red;
}
<div id="group" class="main_div">
  <ul class="table_ul">
    <li class="cells_li"><div><span>fghjkjhgfdsdfghj</span></div></li>
    <li class="cells_li"><div><span>Desktop</span></div></li>
    <li class="cells_li"><div><span>DeskTop</span></div></li>
  </ul>
</div>

Upvotes: 1

Related Questions