Merging cells with display:table

For the masthead of my website, I am using display:table.

This table has a column-1 (70%) and a column-2 (30%). For the first row, this works fine as the left cell holds the company name and the right cell holds the contact details, and having separate cells allows me to manipulate things independently.

Once this was working, I added a second row where I wanted to place the main menu.

However this creates some annoying issues…

  • I had to add a filler cell (Row2, Col2) so I have the shading for the menu cover the entire screen width.

  • If my menu grows in size, it will wrap once it fills the 70% width

  • When my responsive menu changes to a drop-down menu on smaller screens, having things stuck in the 70% cell screws up alignment as things change size.

Is there some way that I can combine cell-1 and cell-2 in row-2 and make it 100% wide?

Based on my research online, there answer appears to be “No.”

With CSS tables you nest tables in order to span rows or columns.

For 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.

I was hoping this code would work, but it just sticks the embedded table in a pseudo Row-2, Col-2.

<!doctype html>
<html lang="en">
<head>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        
        div{
            height: 50px;
            padding: 15px 0 0 0;
        }
        
        .table{
            display: table;
        }
        
        .tableAsRow100{
            display: table;
            width: 100%;
            text-align: right;
        }

        .row{
            display: table-row;
        }
        
        .cell{
            display: table-cell;
        }
        
        .pink{
            background-color: #FFC0CB;
        }
        
        .lemon{
            background-color: #FFFACD;
        }
        
        .bluegray{
            background-color: #ADD8E6;
        }
    </style>
</head>
<body>
        <div class="tableAsRow100 pink">
            <!-- Row-1 -->
            <div class="row">
                <div class="cell">Row-1, Col-1</div>
                <div class="cell">Row-1, Col-2</div>
                <div class="cell">Row-1, Col-3</div>
            </div>
            
            <!-- Row-2 -->
            <div class="tableAsRow100">
                <div class="cell lemon">Table as Row-2, Col-1</div>
                <div class="cell bluegray">Table as Row-2, Col-2</div>
            </div>
        </div>

</body>
</html>

Hi,

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?

Why are you creating table rows?

Table rows are for creating more rows that are tied to the appearance of the first row in the table i.e. 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).

If you are not matching columns then just create a new table with the number of columns you need for that row. You only need table-rows when you have the same integrity of columns throughout the table. (There is no need for the table-row element when you have separate tables with only one row. Just create a display;table parent and a display:table-cell for the children and the browsers will automatically construct the table-row.)

e.g.

<!doctype html>    
<html lang="en">
    <head>
    <style>
    body {
    	margin: 0;
    	padding: 0;
    }
    .table {
    	display: table;
    	height: 50px;
    }
    .tableAsRow100 {
    	display: table;
    	width: 100%;
    	text-align: right;
    }
    .cell {
    	display: table-cell;
    	padding:10px;
    }
    .pink {
    	background-color: #FFC0CB;
    }
    .lemon {
    	background-color: #FFFACD;
    }
    .bluegray {
    	background-color: #ADD8E6;
    }
    </style>
    </head>
    <body>
    <div class="tableAsRow100 pink">
    		<div class="cell">Row-1, Col-1</div>
    		<div class="cell">Row-1, Col-2</div>
    		<div class="cell">Row-1, Col-3</div>
    </div>
    
    <!--  -->
    <div class="tableAsRow100">
    		<div class="cell lemon">Table as Row-2, Col-1</div>
    		<div class="cell bluegray">Table as Row-2, Col-2</div>
    </div>
    </div>
    </body>
    </html>

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.

As 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.

3 Likes

I created a masthead which consists of company info and a 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 suppose this is another question.)

Anyways, 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. (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 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 ended up using @felgall suggestion and creating a display:table with one column and two rows. 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 used to be very good with HTML tables, but without colspan it was tricky, and in my failed attempt above, I thought if I nested a table in the first cell of row 2 it would naturally expand out to the width of the entire table like colspan. However now I see that columns trump everything else, and I needed to have one column and then branch out however I wanted in each cell in each row of the same column.

Was it okay to created a display:table with one column and two rows and then in each cell have a nested display:table with the first cell being a table that is one row and 3 cells and the second table being a table that is one row and one column?

Since I would need both independent tables to be fixed so when the user scrolls the entire masthead is seen and since I want the masthead to be one logical unit of code, I opted for the way I described above.

Okay.

You can nest the table and the nested table can have as many cells as you want but the width of the table will be controlled by the cell (or cells) in the first row. The nested table/s cannot span multiple cells of other rows.

If that’s what you want (and it sounds like it is) then that is fine.

Yes, I see that now.

Right.

Since the parent table is 100% wide and the two nested tables are also 100%, what I have seems to work, although I get your coding advice above.

Thanks! :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.