Sasi Dhivya Sasi Dhivya - 3 months ago 9
CSS Question

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

Answer

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>

Comments