Hi there,
I have a problem with my display:table based layout. I’d like the table-row containing the select to extend to fill the width of its parent table but, as evidenced by the background and border, this isn’t happening and I have no idea why not!
Any help would be most appreciated!
Many thanks,
Anthony
Hi,
The problem is that you have one cell for the select but in the same table structure you have two cells in the next row (table centre) which can’t be resolved as there is no colspan in css tables.
You would need to do the select section as a separate one row table rather than a table with 2 rows.
e.g.
<div class="root">
<div class="header"> header </div>
<div class="content">
<div class="directoryService">
<ul class="navigation">
<li>users</li>
<li>sites</li>
</ul>
<div class="view">
<div class="centres">
<div class="studySelection">
<select>
<option>Zeus</option>
<option>Athena</option>
</select>
</div>
</div>
<div class="centres">
<div class="study">
<div class="centreSelection"> table </div>
<div class="centre"> centre </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer"> footer </div>
</div>
However I think you may need to re-think a little as you do not want to build the whole site trying to mimic tables unless you need that rigid linear alignment that tables offfer.
Use css tables to create equal column sections where needed but don’t overdo it. It may be that you do need your nested table approach but take care with it.
I would also suggest that in this case you let your class names reflect the table property you are using so that you can easily see where you have missed something in a complicated table structure. I know its non-semantic but I’ve done this thousands of times now and it simply works best for css tables.
e.g. roughly like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.table{display:table;width:100%;max-width:960px;margin:auto;}
.tr{display:table-row}
.tc{display:table-cell;vertical-align:}
.content{top;border:1px solid #000;padding:5px;}
</style>
</head>
<body>
<div class="wrap table">
<div class="section tr">
<div class="content tc">Content goes here</div>
<div class="content tc">Content goes here</div>
</div>
</div>
</body>
</html>
It also saves on duplicating css as you don;t have to keep repeating the rules in the css.
Many thanks for that. I made the changes to my code however I also noticed another problem.
If (as happens in my ui) the ‘.centre’ div is hidden (when nothing is selected in the ‘.centreSelection’ div - actually a table in the full version), the ‘.centreSelection’ div fills in 100 width despite being set to 100px. Any way to enforce the 100px?
Many thanks again,
WS
A row of table-cells matches the width of their parent table.
In case there is only one table-cell, it still does the same thing regardless of any cell width that you try to impose.
You can change the width of that table to 100px instead of 100%; The cell will follow.
Or you could change the table-cell, .centreSelection, to display:block; so it’s not a table-cell any more.
Yes but if I were to change the .centreSelection to a display:block, the adjacent .centre when unhidden would need a specific width which is a problem given the auto margins on the root.
Sigh. I’m going to have to go back to using floats aren’t I? 
Or reconsider your design a bit.
Well this was my attempt to reconsider. Unfortunately I still need IE8+ support…
Back to the drawing board. Any pointers appreciated as always!
WS
Help me understand the dynamics of that portion of your page. .centre is hidden as in {visibility:hidden} or {display:none}? Under what conditions is it made visible? Does anything happen to .centreSelection when .centre becomes visible?
.centre is hidden by simply not being there initially (dictated by the web platform we use). When a user selects a centre from the table in .centreSelection, then centre is added via ajax. Nothing happens to .centreSelection when a .centre becomes visible.
Thanks
Ok, that’s vague enough. Can you simulate the content that is expected to be in the .centreSelection and the size of the content that is in .centre? I’m looking for relative sizes and how they flow since they seem to be on the same line in your demo.
.centreSelection contains a div containing a number of filters (selects and inputs) under which there is a table with a few columns. .centre simply contains a list of properties displayed as a definition list with inline dt & dds. .centreSelection has a fixed height and width whereas .centre is supposed to take up all the remaining horizontal space and as much height as needed to accommodate its content (although currently they’re both pretty much the same height).
I’ll flesh out the JSFiddle when I have a bit more time.
Thanks
It would be helpful to me if you could simulate a screen shot showing how this should look in a desktop montor.
Just for fun (and in the absence of more information)… I deleted a few unnecessary table properties and their divs. The result is considerably less CSS and 4 fewer <div>s. I think you will still feel pretty much at home with the code. And it IS IE8 compatible.
I added an “ajaxbox” where your imported definition list items can be placed. The box can be deleted without upsetting the layout. There are no fixed heights.
One easy way to get an overview of the layout is to enable to magenta TEST Outline around the table-cells. You can add other outlines if you wish without affecting the layout of the page.
This is a “working page”. Copy it to a file, give it an .html suffix and open it in your browser to give it the “try before you buy” test.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>wsqueers3a</title>
<!--
https://www.sitepoint.com/community/t/trouble-with-css-table-layout/224524
wsqueers
May 19,2016 7:57 AM
https://jsfiddle.net/7tea6tyh/3/
-->
<style type="text/css">
html {
box-sizing:border-box;
}
*,*:before,*:after {
box-sizing:inherit;
}
.table {
display:table;
width:100%;
}
.tcell {
display:table-cell;
vertical-align:middle;
/* outline:1px dotted magenta; /* TEST Outline. To Be DELETED. */
}
.outer { /* this classname was changed from "root" */
min-width:480px;
max-width:640px;
margin:0 auto;
}
.header {
border-bottom:1px solid gray;
}
.directoryService {
margin:8px 0;
}
.navigation {
list-style:none;
width:100px;
padding:0;
}
.navigation li {
border:1px solid gray;
background-color:#ddd;
text-align:center;
padding:8px 0;
}
.navigation li + li { /* IE8 does not recognize :last-child */
margin-top:8px;
}
.view {
vertical-align:top;
padding-left:8px;
}
.studySelection {
border-bottom:1px solid gray;
background-color:lightblue;
}
.study {
background-color:lightgray;
margin-top:8px;
}
.centreSelection {
list-style:none;
width:100px;
padding-left:8px;
margin:0;
}
.centreSelection li {
margin:1px 0;
}
.footer {
border-top:1px solid gray;
}
.ajaxbox {
/* display:none; /* simulates add and delete of ajaxbox by your software */
}
</style>
</head>
<body>
<div class="outer">
<div class="header">header</div>
<div class="table directoryService">
<ul class="tcell navigation">
<li>users</li>
<li>sites</li>
</ul>
<div class="tcell view">
<div class="studySelection">
<select>
<option>Zeus</option>
<option>Athena</option>
</select>
</div>
<div class="table study">
<ul class="tcell centreSelection">
<li>Centre</li>
<li>Selection</li>
<li>List</li>
</ul>
<div class="tcell centre">
<div class="ajaxbox">centre content displayed in deletable ajaxbox</div>
</div>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
Cheers
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
