I have a table with two columns. The first (which contains a menu) should have a
fixed width, while the second (containing some page content) can vary in width. The table should overflow the window (which it doesn't by default), because otherwise the browser reduces the width of the menu column if the content is very broad. But I cannot define a fixed width for the table (causing it to overflow) because I don't know the width of the content.
Overflow:scroll
does not seem to work with tables. I would be thankful for workarounds/solutions.
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">
</td>
<td id="rootTableContent">
</td>
</tr>
The solution to this problem is to use proper CSS (Divs/Spans, etc) to layout your website as opposed to tables. I'm all for using tables to display tabular data and you'll see me arguing for them in places that they're valid, but this is not one of them.
This is easily done with something like this:
<div style="float:left; width: 150px">
Navigation Code Here
</div>
<div style="float: left">
Other Content Here
</div>
<div style="clear:both"></div>
Obviously, I'm oversimplifying this solution, you're going to have more specific code to deal with your layout (need more detail to help more specifically) But, it's important to use the right tools for the job.
As others have stated, please don't use <table> layouts. It's old, clunky, and confuses screen readers and other accessibility software.
If you absolutely insist on using your method, you can try this:
Live Demo
<style type="text/css">
div.wrap {
overflow-y: auto;
width: 75%;
}
div.wrap table {
border: 1px solid #000;
width: 100%;
}
div.wrap table td {
padding: 20px;
}
</style>
<div class="wrap">
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">rootTableMenu</td>
<td id="rootTableContent">rootTableContent</td>
</tr>
</table>
</div>
Related
I have a dashboard that I'm working on that contains a table of width 100%. Under normal usage, the table has more columns than screen real estate and the dashboard scrolls through the results. However, under a new requirement, I only show selected servers. This is where I discovered my issue.
The table has a number of columns, but the main left handed column lists each row and is positioned absolutely on the left hand side of the page. I have attached some sample code:
<html>
<head>
<style type="text/css">
.headercol {
position:absolute;
width: 15%;
left: 0;
top: auto;
padding-right: 0;
padding-left: 0;
}
</style>
</head>
<body>
<body style="height: 90%">
<table style="width: 100%; border: 1px solid blue;">
<tr>
<td style="width: 200px;" class="headercol">asdf</td>
<td style="width: 200px;">adsf</td>
<td style="width: 200px;">adsf</td>
</tr>
</table>
</div>
</body>
</html>
The problem is, under this organization, all columns in the table that are not headercol now become right justified creating a huge space in the middle of the table. I would like them to return to their left justified positions. Does anyone know of a work around for this? The layout goes back to normal when not using the position:absolute, but then we lose our fixed column. This is not an issue under normal conditions where there are columns to make up for the blank space in the table. This behavior was noted in both IE11 and Firefox 32.
Ok, so if you are using a stabile width for each <td> and position: absolute; in the first one, so you can do the same for the rest of the <td>.
And maybe get rid of <table> and use <div> instead, it will be easier and better :)
I ended up floating all of the TD's over to the left and specifying an offset of the static column for the 2nd column. After that the remaining columns just float: left and all was well. An odd way of doing things, but it worked like a charm.
Imagine you have a complex structure with 2 elements in a table cell. Just like that:
<table>
<tbody>
<tr>
<td>
<div class="wideDiv">Here goes some very wide content</div>
<div class="anotherDiv">This content doesn't have to be wide.</div>
</td>
</tr>
</tbody>
</table>
.wideDiv has content that may be wider than the page itself. In this case it forces .anotherDiv to get all this space too. I'd want to force .wideDiv to be not wider than the page itself (using scroll, of course), it works this way if we don't wrap divs with table. Fixed size is an obvious solution, but is there any other way?
Here's working example:
http://jsfiddle.net/GbEvT/2/
Add
.anotherDiv {
width: 100vw;
}
Here's the update: http://jsfiddle.net/GbEvT/4/
It tells anotherDiv to take 100% of the screen, not more.
Here, you have another solution:
table {
width: 100%;
table-layout: fixed;
}
The items in my table are not center. I'm still a beginner and know that it is bad practice to use tables these days but I feel I should start from the beginning. I have 2 items that I would like to center in the middle of the screen in the same row. Currently, the images are to the left.
<table>
<tr align="center">
<td>
<a href="http://sourceforge.net/">
<img src="Resource/download.png">
</a>
</td>
<td>
<a href="http://sourceforge.net/">
<img src="Resource/info.png">
</a>
</td>
</tr>
</table>
Just going to post this as a seperate answer, because of how horrible the convention to use attributes for styling is. Don't ever use attributes for styling. See the MDN attributes list. See all those thumbs down next to the attribute name? They mean: 'Don't use this attribute'. It does still work, but it's just horrible. Like using deprecated tags like center, using deprecated attributes is just really bad habit. The MDN article mentions how to achieve the same thing as what you'd do with the attribute, but without the deprecated HTML.
In this situation, use:
<table style="width:100%;border:1px solid black;">
and:
<tr style="text-align:center;">
The final fiddle would be this.
Jatin gave you a solution, but he didn't explain it. Your align attribute is set properly and it's working, but the table is only as wide as its contents. The text is centered within the table as you intended, but the table itself isn't centered. Since the table is left-justified by default, it looks like it's not centered.
Especially as a beginner, you should try to do things the right way. It'll be much easier for you later if you adopt good practices early. A table is the wrong thing for what you're trying to do.
An important habit to get into is to put only your content, like text and pictures, into the HTML and put all the code that controls how it looks into CSS. Although the align property is valid (in HTML 4), it means you're putting something that controls the appearance into the HTML. The same goes for the border and width properties.
This is how you should control the appearance of a table:
HTML
<table>
<tr>
<td>
<img src="Resource/download.png">
</td>
<td>
<img src="Resource/info.png">
</td>
</tr>
</table>
CSS
table {
border: 1px solid gray;
}
td {
border: 1px solid gray;
text-align: center;
}
A better way might be like this:
HTML
Google
Yahoo
CSS
a {
display: block;
width: 50%;
float: left;
text-align: center;
}
If you wanted to center more than just a couple of links, you may want to put it into a block or a paragraph.
I put something up on CodePen that shows a few examples of how to accomplish this: http://codepen.io/Ghodmode/pen/iaEvh
Working Fiddle
Small Change:
<table width="100%" border="1">
I want do do a layout that is search engine and speed-browser friendly with content first in source code. Usually this looks like this:
<body>
<div id="content" style="margin-top: 200px;">
i am content, i go first
</div>
<div id="head" style="height: 200px; position: absolute;">
i am an header that is depressed because my designer things i am not important
</div>
</body>
but I need an dynamic sized header increases the height with its content...
this must be a common problem. is it possible to solve somehow?
any ideas?
I agree with #babtek though, I'd really like to be wrong, cause this looks interesting.
Also, this is probably not what you need, but HTML5 has a "reversed" attribute for <ol> that could do the trick.
I do not think this is possible using CSS alone. Need JavaScript.
As far as I am concerned it can only be achieved using tables.
<table>
<tr>
<td><!-- empty table cell --></td>
<td rowspan="2" valign="top">General Content</td>
</tr>
<tr>
<td valign="top">Navigation</td>
</tr>
</table>
Since you've tagged the divs with id, it makes more sense to put the styles in css.
In any case, have you tried
height: auto;
If you want to let the height adjust with content but have it at least 200px, then
min-height: 200px;
should do the trick.
I have two HTML tables which would ideally be placed side by side on the screen. Widescreen monitors will cope with this fine, but the tables are too wide to be side by side on most old-fashioned monitors. So I want to use css (or even just HTML, if possible) to place the tables side by side only if the resolution is high enough.
This works automatically with images, usually, but is there a way to do it for tables?
Yes, apply the CSS style float:left to the table elements
Here is an excellent primer on floating: http://css.maxdesign.com.au/floatutorial/
My advice would be to float the table (remember to specify a table width - choose one that's full on a non-widescreen monitor).
table {
width: 500px; /* important */
float: left;
}
However this might work too (untested):
table {
display: inline;
}
try this (you can change the size of the window):
<html>
<body bgcolor="red">
<p>
<table bgcolor="green" style="float: right;">
<tr>
<td>sssssssssssssssssssssssssssssssssssssssssss</td>
</tr>
</table>
<table bgcolor="blue" style="float: left;">
<tr>
<td>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
</tr>
</table>
</p>
</body>
</html>
-->