CODEWITHSUNDEEP
htmlcss
dsw88
dsw88

Reputation: 4592

CSS - Styling ul elements as if they were table row elements

I'm working on a rather difficult styling problem. I've got a collection of ul elements that are contained inside a div tag. Visually, each ul should be displayed as a row in a table. The structure is as follows:

<div class="tableElementEmulation">
   <ul class="trElementEmulation">
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
   </ul>
</div>

I need to style this structure to function as if it were an HTML table. This has proven to be very difficult because the table element handles a lot of table formatting by itself without any extra css. I'm not a CSS master by any means, so replicating that functionality hasn't been very successful thus far.

Obviously it would just be easier to use an actual HTML table to achieve this formatting, but I'm using a plugin for this page that only works on a structure similar to what I've listed above. I'm required to use this plugin for the page, so just using an HTML table is unfortunately not an option. Does anyone have any suggestions regarding achieving table-like styling on this html structure listed above?

Upvotes: 1

Views: 10146

Answers (1)

abhshkdz
abhshkdz

Reputation: 6365

HTML:

<div class="tableElementEmulation">
   <ul class="trElementEmulation">
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
   </ul>
</div>

CSS:

.trElementEmulation li {
    list-style:none;
    float:left;
    padding: 5px 10px;
    border: 1px solid #eee;
}

See the demo.

Upvotes: 5

Related Questions