I need a layout with two columns where each column expand to the height of the taller column.
With table I would simply do:
<table class="parent">
<tr>
<td class="columnLeft">Column 1</td>
<td class="columnRight">Column 2</td>
</tr>
</table>
And column 1 & 2 will keep the same variable height.
With div there are some solution (involving use of overflow:hidden and more) that needs many hacks to work well cross-browser.
(jsFiddle here: http://jsfiddle.net/rJjJa/1/)
In this case I would simply use table, without needing the extra effort of CSS hacks (or lots of extra markup). Do you think table is fine for this?
If you want divs to behave just like a table, you could use display: table-cell; for each div. They should behave just like a td; both should be the same height. This should work in all modern browsers and ie8 and above.
The tag <table> is outdated for layouts! Do not use it.
Instead, there are many Cross Browser CSS Compatible 2 Column Layouts, without using any hacks. One such is, Equal height columns.
Equal height columns
It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.
An article, explained in detail here: Equal Height Columns with Cross-Browser CSS.
Related
It's already been confirmed that it's not possible to add a box-shadow to a display:table-row element in a way that's compatible with all the major browsers. For reasons that boggle my mind, a row cannot be styled as a group, which means you can't add a box-shadow to an entire row in a display:table and can only add it to the individual display:table-cell elements, which then creates vertical shadowing in-between cells which I don't want.
So how can I mimic a table whereby the width of the first pseudo-column of all the pseudo-rows of the pseudo-table are the same width as its longest element, and the second column is whatever width is left while adding box-shadow to the pseudo-row?
Right now I'm using white-space: nowrap and width: 1px on the first display:table-cell element of each display:table-row to ensure the left-most column of all rows are the width of the longest text in that column regardless of the width of the screen.
See example here: https://jsfiddle.net/yupwh6uq/
That works great in terms of formatting the display:table and the columns, but it doesn't allow me to add box-shadow to the display:table-row elements.
So how can I get the auto-column-width-adjusting table effect that I have now to display the info, but with the box-shadow on each pseudo-row in a way that's compatible with all major browsers using pure HTML/CSS?
P.S. I want to avoid using display:flex; as it will break the formatting on older browsers.
This can help
but it calculates with fix height of a row and need span in td (but it could not be a problem in the table)
http://codepen.io/michalkliment/pen/dWzwEG
(tested in safari (ipad/mac) / chrome / IE10 / firefox)
<table>
<tr>
<td><span>Celll 1111</span></td>
<td><span>Celll 222</span></td>
</tr>
<tr>
<td><span>Cellll 33</span></td>
<td><span>Cell 4</span></td>
</tr>
</table>
I have a table inside a div with scrollbars.
There are some columns in the table with width defined. Till then table headers are fine.
But when I add more columns to grid the header test gets wrapped which i don't want, instead i want horizontal scroll to come.
Normal :
http://jsfiddle.net/hVRW7/
More Columns :
http://jsfiddle.net/hVRW7/1/
The quickest fix is to wrap <th>'s labels in spans, then give fixed width to them:
<table>
<thead>
<tr>
<th><span>Label1</span></th>
<th><span>Label2</span></th>
</tr>
</thead>
</table>
Then style as:
th span
{
display:inline-block;
width:300px; /* or what you wish */
}
EDIT see fiddle.
Your issue is that you have defined a limit of 1024px to the width of the table and then you are defining new columns with a total width that adds up to 1430px. All browsers are then trying to do their best to make the information fit within the defined width of 1024px. Since in your given example you are just repeatedly defining the same sets of columns are you sure you need all of them? If not you should narrow them down to only the ones needed and then determine your actual overall width. The defined width of the overall table will take precedence over individual widths in determining the maximum width of the table.
I want to create a table with 3 columns: On the left and right fixed-width columns (which are obscured by position:fixed - divs) and in the middle a variable width column.
This does NOT work:
<table>
<tr>
<td width=202px></td>
<td> [MYCONTENT] </td>
<td width=200px></td>
</tr>
</table>
The problem is, that for some reason the browsers (tested on Chrome and Firefox) think that I don't really mean it when the browser-window is not wide enough: The outer columns are cropped and width-setting ignored, therefore the real content is sliding under my divs and become completely inaccessible.
The only idea I have left is to use a 1990's-era transparent pixel resized to 200px width, but I shudder at the thought. There must surely be a better way?
(BTW, yes I have tried various pure-css layouts, and none was suitable, for example if you use overflow:auto for the middle column, the scrollbar at the bottom also scrolls(!!) that means if the page is both higher and wider than the window, you have to first scroll down to see the scrollbar, then scroll horizontally, then maybe scroll up again to see what you wanted to see in the first place. I also tried to use padding: to force the needed margins on the left and right, but this also was ignored when the browser-window was not wide enough.)
ok - here it is with tables.
http://jsfiddle.net/sheriffderek/wAGKp/2/
i guess the short answer would be - take the styles out of the html and use a selector. (class in this case" and then min-width --- and width... also - keep in mind that padding and margins will change the width of your stuff... so you could use the border-box method... (it's rad) and included in the second... makes it so that padding stays in the original div size --- hope this helps.
and here it is the way i would do it. (without tables...)
http://jsfiddle.net/sheriffderek/GBtdy/1/
Tables are for tabular data, if you want to layout content you should be using CSS.
I recommend using something like Twitter Boostrap if you struggling with the CSS.
If you really just want a specific solution have a look at the results for terms like "css 3 column layout fluid center - I am not fobbing you off with that, there really are great answers there that are exactly what you want, and lots of search results will take you to those pages (especially to the manisheriar.com and A List Apart articles).
You can use min-width (on the middle div) and max-width - as well as media queries - to help control what happens in smaller windows.
Let's say I have a table of two columns an three rows. Now, In the left column I have content in every row, but in the right one I put a <textarea> element with rowspan="3".
<table>
<tr><td>row one</td><td rowspan="3"><form><textarea></textarea></form></td></tr>
<tr><td>row two</td></tr>
<tr><td>row three</td></tr>
</table>
In most modern browsers you can resize that text area, but I don't need to constrain that. The problem occurs when text area gets bigger vertically and starts to stretch out the table. In Chrome only the last row resizes (desired behavior), while in Firefox all of them expand respectively.
Is there any way to set which rows have fixed height and which ones stretch?
I don't like to say never.. but in this case there is probably not a crossbrowser compatible way using the code you have
Tables are designed to stretch, not to be restricted by heights, and the way that browsers "pass over" a table to calculate cell heights and widths is up to each browser - i.e. there's no hard and fast recommendation - In most of them, on their first pass over the table they're hitting that rowspan and calculating the whole table height from the textarea inside it then dividing the actual rows equally it takes less parsing that way you can imagine if this were a great long table with multiple rowspans the table wouldn't render very quickly if the browser kept having to go back over the table to re-adjust row heights
Anyway, in saying all that the robust cross-browser solution is to not use the rowspan, but to instead nest a table (yuk ;)) inside the first cell which then contains your 3 rows.. or you could simply put three divs inside the first cell to simulate your rows e.g.
<table summary="" cellspacing="0">
<tr>
<td>
<div>row one</div>
<div>row two</div>
<div>row three</div>
</td>
<td><form><textarea></textarea></form></td>
</tr>
</table>
Then style them like your table. Using divs will give you ultimate control over their heights in relation to the textarea
I would like to have a cell go across two columns with two cells below it. How do I do this in CSS with <div> elements? It should be equivalent to:
<table>
<tr>
<td colspan="2">Major column</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
Please note that C1 and C2 are not necessarily going to be 50% each. The value may change depending on their contents. I also need all items in those cells no matter how many rows there are to line up just like they would in a table.
You would want markup like:
<div class="main">
<div class="topRow">Major column</div>
<div class="leftCol">C1</div>
<div class="rightCol">C2</div>
<div>
And then some css to position them:
div.topRow {
width:100%;
clear:both;
}
div.leftCol {
width:50%;
float:left;
}
div.rightCol {
width:50%;
float:right;
}
I would recommend putting them in a container div if being used for layout.
HTML:
<div> full width </div>
<div class="column50"> left </div>
<div class="column50"> right </div>
CSS:
div.column50 {
float: left;
width: 50%;
}
In case it's unclear, there's no need to create two separate CSS classes for this case. Both of the last two divs have a 50% width, no margin, and no padding. Setting them both to 50% width and left float has the same effect as setting the right one with a right float instead.
"Please note that C1 and C2 are not
necessarily going to be 50% each. The
value may change depending on their
contents. I also need all items in
those cells no matter how many rows
there are to line up just like they
would in a table."
The above is not possible in a cross browser way, without using a table (You can simulate table layout with CSS: "display: table", but that doesn't work in IE6 or IE7).
I would suggest you think a bit differently when designing with CSS instead of tables, it's not possible to just replace "tr" and "td" with "div" and make things magically work like they used to. I suggest you set the widths of the bottom "cells", and use one of the options people have given you above.
Hope that helps!
All of the above will work, but keep in mind that elements will "escape" from their parent div in IE6. This is a pain, but IE6 support is still something most people need to think about.
The solution to escaping is to give the containing element a height or width (any will do, it will stretch to fit so usually 1% is what I use.).
Also, if setting widths, keep in mind that any borders or margin you set are in addition to the width of the elements, so if you set two divs at 50% with a border or margin, you will get a line break.