Make tables behave like 'proper' block level elements

[pricey_ZEAL]

Hi!

I’m new here so please bear with me!

I’m building a css library with sass, all was going fine until I wanted display: table to behave like a block level element, i.e. I need width: auto; to work!

Basically I have a layout module, which, consists of 2 types of layout

.inline-layout { display: inline-block; }
.table-layout { display: table; }

if you check this jsfiddle you will be able to better see the problem I have: http://jsfiddle.net/sjL550k3/1/

The first example works exactly as I want it to, (think of it in terms of a nested layout), as you can see from the example I cant achieve the same result with display: table.

My question is, is it possible to make display: table; behave like a regular block level element???

Any help/advice would be greatly appreciated.

Dave

[Paulie_D]

I know this is a silly point

If you wanted this:

display: table to behave like a block level element,

then display:table was not the way to go. :)

If you want block level elements to behave like b.l.e. then don’t change their block formatting and find another layout method that achieves your intention!

[pricey_ZEAL]

Hey Paulie,

Thanks for the reply: display: table has some qualities that would benefit the layout part of my library. I will just have to ensure that they are not nested (i.e. requiring a negative margin)

Dave

[Author]

Posts