I have multiple tables displayed as inline-block elements. However, I want to fix the widths so that they will out the horizontal space, giving each table a 33% width (3 tables per row). Example code is as follows:
<table>
<thead>
<tr><th></th><th></th><th></th><th></th></tr>
</thead>
<tbody>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
...repeat the above code 2 more times.
Now I can't seem to get it right. All the tables have the class attribute and are set to 33% width, but nothing seems to change.
Other possibility is
'float: left'
So you don't have to set width to almost 33.3%.
Just make sure you have a Clearfix on the table's parent element.
Fiddle
try this
table
{
float:left;
width:33%;
}
In the percent you have to cater for padding, margin and border issue and reduce it as necessary. You might need to add display:inline-block to the container of the 3 tables
Related
I always seem to run into this same problem which I think is a bit of a gap in my CSS knowledge. I'm using bootstrap but any particular best method would be fine. I simply want to create something similar to this:
<table style="height:100%; width:100%">
<tr style="height:15%"><td></td></tr>
<tr style="height:70%; background-color:#EAB300; text-align:center;"><td>Main</td></tr>
<tr style="height:15%"><td></td></tr>
</table>
http://jsfiddle.net/c24hd/
But with divs rather than tables. It takes seconds to do with a table but when I replicate it with divs I run into the trouble of not being able to apply a percent based height to divs.
Any tips so I can stop running into this problem?
TIA
I would make a <div> and set the height to 100%. Then set the inner <div> margins to auto.
EDIT: Never mind that, the best is way is to display the div as a table and the inner div as a table cell then vertical-align it.
EDIT: One more, you can even use absolute positioning to center it on the screen.
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.
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.
<table>
<tr>
<th><img src="image.jpg" /></th>
<td>row1 column2</td>
<td>row1 column3</td>
<td>row1 column4</td>
</tr>
</table>
Results
If the height of the img is equal to 10px, the height of all cells in that row equals 10px.
Adding a border to the td's results in the td's looking taller then the img.
Note: the img is contained in a th because I do not want a border around the img, only the td's.
Desired Results
As displayed in the image above, the height of the td's should be adjustable so that their top and bottom borders can be aligned with the img.
Research
Using CSS to specify a height on the td's only works if the height is larger then the height of the img (in other words, the td's cannot be smaller then the img).
Additional research indicates that this is just the way tables work.
Generally speaking, in a table, the <td> elements are all the same size within a row, that is the purpose of the rows, you can align the cell contents within the row, but otherwise the row will have a consistent height. The height of the row defaults to the maximum height of any cell within it. Horizontal borders run with rows generally.
The only way to alter this really is to use rowspan with additional rows thrown in for positioning, but that is ugly in the extreme.
Do keep in mind that tables are for tabular data only, and should generally be avoided for other purposes, particularly layout.
I'm not sure I understand, you want border on the "inside" instead of the "outside"?
This is easily accomplished with CSS and divs, setting a negative margin equal to the border-width.
Is there a reason you're using tables?
You can use the following CSS properties to make the border-added boxes behave like Internet Explorer, in that the border width will be calculated into the box model size:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
source: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-did-internet-explorer-get-the-box-model-right/
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.