css display table cell margin not working

Then I created another display:table nested in each cell in this pseudo-table and things seem to work okay, although I’m not sure if the extra overhead is a major problem? I ended up using suggestion and creating a display:table with one column and two rows. I also tried your suggestion of having two separate tables, but since I have been playing around with a fixed masthead, that seemed to complicate things. (I think I got started on display:table, because I wanted a way to have the company name and a tagline below it on the far left side and the contact details on the far right side in a responsive/fluid design, and suggestions on here lent themselves to using display:table.

(I suppose this is another question.)Īnyways, so I thought of my masthead as a CSS table consisting of two rows: Row-1 was the company info, and Row-2 was the top menu. To be honest, I am not sure why I an using CSS display table - I guess I picked up from people on SItePoint that display:table is better than using HTML tables of going crazy with divs and traditional CSS, but at this point I am not sure of the benefit of display:table to my responsive design. I created a masthead which consists of company info and a top menu. If you are indeed trying to create colspan or rowspan for a css table then you won’t be able to do it properly and even if you use nested tables you will lose the integrity of column boundaries anyway making it pointless.Īs I said this all depends on the layout you require as CSS is never about making neat boxes but about accommodating content in the best way possible within the bounds of what is feasible. Just create a display table parent and a display:table-cell for the children and the browsers will automatically construct the table-row.) (There is no need for the table-row element when you have separate tables with only one row. You only need table-rows when you have the same integrity of columns throughout the table.

If you are not matching columns then just create a new table with the number of columns you need for that row. the columns will need to match (unlike html tables there is no colspan or rowspan but those attributes are mostly only needed for tabular content anyway). Table rows are for creating more rows that are tied to the appearance of the first row in the table i.e. Without a clear example of the full layout you intend to make then its hard to offer suggestions because it all depends on what comes next? I was hoping this code would work, but it just sticks the embedded table in a pseudo Row-2, Col-2. With CSS tables you nest tables in order to span rows or columns.įor example: A two column table nested as the second row of a one column table gives you three cells - one in the first row and two in the second row.

Css display table cell margin not working