CSS table based layout row is not extending 100% width
I would like to extend the width of a css table based row to 100% browser width without breaking the layout of the rest of the content. Notice the green header bar is not extending full width even though it has been set to 100% width. My code can be found here: http://codepen.io/anon/pen/HfnFv CSS
html,body < overflow:visible; height:100%;padding:0;margin:0; >.header .table < display:table; width:100%; position:relative; min-height:100%; >.trow < display:table-row; width:100%; >.left < width:30%; height:100%; background-color:#990000; color:#efefef; display:table-cell; >.left p < margin:100px 0; >.right
to the header row. But I would love to see an alternate solution that does not absolutely position the child element.
I clearly said extend the width of a table based row. A table based row is: display:table-row, what is confusing about the question?
4 Answers 4
Your issue is because we cant simulate colspan with css. As you have one row above another row that contains two cells, this header row supposedly should be colspan=»2″ . But as it is not possible, your options are:
- Change your structure.
- If you want keep you structure as it is now your only option is set your .header , using display:table-caption; and caption-side:top; as the example below:
I made a demo with your own example:
EDIT change .trow back and add:
html,body < overflow:visible; height:100%;padding:0;margin:0; >.header .table < display:table; width:100%; position:relative; min-height:100%; >.trow < display:table-row; width:100%; >.left < width:30%; height:100%; background-color:#990000; color:#efefef; display:table-cell; >.left p < margin:100px 0; >.right
My suggestion would be the following.
There is really no need for absolute positioning of any element in this situation.
In this example, we have a two horizontal blocks (.row). The first with a width of 100% and the second with a max width (62.5rem/1000px).
I use Foundation quite a bit, so I kept the naming conventions; although these are the bare bones and the framework isn’t necessary in this example.
html, body < height: 100%; >body < padding: 0; margin: 0; position: relative; font-size: 100%; >.row < width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5rem; >.row p < padding: 1rem; >.column, .columns < padding-left: 0.9375rem; padding-right: 0.9375rem; width: 100%; float: left; >.row.max-width < width: 100%; max-width: 100%; >.row.max-width .columns < padding-left: 0; padding-right:0; >.header .table < display:table; width:100%; >.table p < padding: 1rem; >.trow < display:table; width:100%; >.left < width:30%; background-color:#990000; color:#efefef; display:table-cell; >.right
test
Row above 100%
Row below -- max-width 62.5em
test
test
Html width 100%
This is driving me nuts. What happens with «width:100%» ? Apparently it just works in IExplore, so I think it’s one of those things Microsoft made up. But then. how do you tell to a element that has to take all available parent’s space in a way that all browsers can understand? Cheers?
5 Answers 5
A block level element (display:block;) will automatically take up 100% of the width of the parent element. You can resize its width using percentages or pixels. Inline elements (display:inline;) cannot have their width modified.
If you want something to take up all the parent elements space I suggest you try something like this:
I tried display: block and 100% and it doesn’t work. when you change to display: inline, it’s working!
Width:100% is certainly not a MS fabrication. Understanding things like box model and inline vs block (e.g spans vs divs) elements will help you to understand some of what you will see. The browser differences have less to do with «Width:100%» than with how browsers interpret the box model for a given element, and in particular things like margins, borders, and padding.AFAIK, all browsers will honor width:100%, but how they interpret everything else may impact how much space they give over as «100%».
Remember that 100% is 100% of the PARENT, not the WINDOW.
In this case, «two» will still only be 50% of the window wide because it is in a parent that is 50% wide. (1 * .5 = .5)
So, saying that, a specific example of baffling behavior would greatly help people give you a specific answer.
CSS width and max-width combined
I think it’s obvious I intend for the table to take the full width available, with a capped maximum size of 800px. This works in Internet Explorer and Firefox, however in Chrome it appears that the max-width is being ignored when width is present. I have tried using max-width: 100%; width: 800px; , which again works in IE and FF but the max-width is ignored in Chrome. I have tried using just max-width: 800px but in Chrome the table comes out 1159 pixels wide instead. ! If anyone can help with this, it would be much appreciated.
You’re trying to slam two conflicting things together. width: 100% says to occupy the full horizontal width of the parent container, then saying «Don’t go any wider than 800px». It’s entirely up to the CSS engine to determine WHICH of those two contradictory statements has precendence.
@Marc B: They’re not contradictory. If the browser width (for example) is less than 800px, then the width should expand to 100% of the available space. If the browser window is greater than 800px, then it should only expand to 800px in width (the maximum).
6 Answers 6
to the table element’s style attribute (preferably in a CSS file or the section of the document rather than as in inline style).
Wouldn’t this negatively affect the table? If so, perhaps it would be better to apply the styles to a containing div ?
@Kolink No, it won’t negatively affect the table. Div’s are already block style, your problem is that max-width only applies to block elements so you have to apply display:block to the table.
The default display type for a table element is «table» which CSS defines as «a block-level table: it is a rectangular block that participates in a block formatting context». This is pretty much the same as display: block apart from the way properties like «width» behave (along with «max-width», etc). In display: table, min/max-width may be ignored and width can be subject to the contents of the table. With display: block, setting width or max-width works regardless of contents. You probably usually want display:block because of this. And it so happens to work when applied to a table.
Here it is correct for the table itself (i.e. the border of the table has the correct width), but the cells are not affected (basically they end up outside of the table)
Wrapping in a div with max-width and using display: block don’t work on Chrome 66. However, table-layout: fixed does: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths. Under the «fixed» layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the «automatic» layout method, but subsequent cell content might not fit in the column widths provided. Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won’t overflow the cells.
How create table only using tag and Css
But this table not work with IE7 and below version.Please give your solution and ideas for me. Thanks.
One thing you might want to notice is your is defined as .divRow in your CSS. Just thought I’d point that out.
I think the reason anybody want to use a div based table instead of a normal table is that. rendering/animations/reflows on a div based table is actually faster ( esp. for large DOM size) than rendering a normal table. see this. stubbornella.org/content/2009/03/27/… this. developer.nokia.com/community/wiki/… above that all the data intensive javascript plugins like slickgrid etc use divBasedtable
Another correction: if your table does not fit on the screen, then your cells will wrap. Reason: the float: left is to blame. See also: stackoverflow.com/questions/30001848/…
10 Answers 10
.div-table < display: table; width: auto; background-color: #eee; border: 1px solid #666666; border-spacing: 5px; /* cellspacing:poor IE support for this */ >.div-table-row < display: table-row; width: auto; clear: both; >.div-table-col < float: left; /* fix for buggy browsers */ display: table-column; width: 200px; background-color: #ccc; >.div-table < display: table; width: auto; background-color: #eee; border: 1px solid #666666; border-spacing: 5px; /* cellspacing:poor IE support for this */ >.div-table-row < display: table-row; width: auto; clear: both; >.div-table-col < float: left; /* fix for buggy browsers */ display: table-column; width: 200px; background-color: #ccc; > How can this have over 200 upvotes, when it is plainly wrong. It should have table-cell and not table-column as said above.
hey, I’m still learning CSS/HTML styling and want to know the best practices. I found this because I was trying to create a data container that would show elements in rows of a table in «Desktop» mode but would print out elements vertically (multiple lines per element) when in «Mobile» mode. This would be accomplished using the @media tag overriding the styles based on screen size. What would be the best practice for accomplishing this if not using divs that act like a table in Desktop mode, but not in Mobile mode?
@simplyletgo: Semantically, it’d be more appropriate to style the table cells as blocks than to try to make divs act like a table.
why not? if you use tables you can’t add a scrollbar around certain cells so that your table has a excel-like locked headers, for example. Tables have a lot of limitations, why can this not be done with divs?
@pilavdzice: It can, if you have a very good reason for abandoning best practices. but it should be a last resort. Divs have zero semantic value, and should only exist when you need a block-level element but don’t have a semantic equivalent. If the data actually is a table, then it should be marked up as one til you have a damn good reason to do otherwise.
@pilavdzice: As for limitations, tables don’t actually have that many when used correctly (for naturally tabular data).
This is an old thread, but I thought I should post my solution. I faced the same problem recently and the way I solved it is by following a three-step approach as outlined below which is very simple without any complex CSS.
(NOTE : Of course, for modern browsers, using the values of table or table-row or table-cell for display CSS attribute would solve the problem. But the approach I used will work equally well in modern and older browsers since it does not use these values for display CSS attribute.)
3-STEP SIMPLE APPROACH
For table with divs only so you get cells and rows just like in a table element use the following approach.
- Replace table element with a block div (use a .table class)
- Replace each tr or th element with a block div (use a .row class)
- Replace each td element with an inline block div (use a .cell class)
Table below using table element
Mike 36 years Architect Sunil 45 years Vice President aas Jason 27 years Junior Developer
Table below is using Divs only
Mike 36 years Architect Sunil 45 years Vice President Jason 27 years Junior Developer To get around the effect of same width not being maintained across all cells of a column as mentioned by thatslch in a comment, one could adopt either of the two approaches below.
- Specify a width for cell class cell
- Use CSS of modern browsers as below. .table .row < display:table-row;>.cell