CODEWITHSUNDEEP
javascripthtmlcss
Asle G
Asle G

Reputation: 588

CSS styling of <UL> as table

I want to use element-loops to create a table. I put one for every row and put a around it all, like this:

HTML:

<div class="tableEmulator">
   <ul class="trEmulator">
      <li class="tdEmulator">Some text</li>
      <li class="tdEmulator">Some text</li>
    </ul>
    <ul class="trEmulator">
      <li class="tdEmulator">Some text</li>
      <li class="tdEmulator">Some text</li>
   </ul>
</div>

CSS:

.tableEmulator {
    width: auto;
    height: auto;
    border: 1px solid;
    border-color: blue;
}
.trEmulator {
    clear:both;
    border: 1px solid;
    border-color: red;
    with:auto;
}
.trEmulator li {
    list-style:none;
    float:left;
    position: relative;
    padding: 5px 10px;
    border: 1px solid #eee; 
}

However I´m stuck in css trying to make to outer border of my table. I expected width/height: auto; would do the trick, but it doesn´t. Any suggestions?

Thanks in advance!

Fiddle: http://jsfiddle.net/AsleG/baLhx3v0/

Upvotes: 0

Views: 121

Answers (2)

Eyal
Eyal

Reputation: 532

You can try using CSS flex.

updated example: http://jsfiddle.net/baLhx3v0/5/

.tableEmulator {
    display: inline-flex;
    flex-direction: column;
    border: 1px solid;
    border-color: blue;
}
ul.trEmulator {
    display:flex;
    clear:both;
    border: 1px solid;
    border-color: red;
    width:auto;

}
.trEmulator li {
    list-style:none;
    position: relative;
    padding: 5px 10px;
    border: 1px solid #eee; 
}

You can find more about Flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Broken Dust
Broken Dust

Reputation: 1

If you set the width/height auto he'd take all avaible space that where left. In your link I'd set the width to ~200px and I think that is what you wanted.

Be sure that he'd only get so much space from inherit element that he'd can only get so much space he had to use.

(With this you can give him the auto option of course)

Upvotes: 0

Related Questions