On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}
Related
I'm using an absolutely positioned element in a table header cell. To do this, the TH has to be positioned itself, to make it the child element's offsetParent (in my case, using position:relative). Unfortunately, it appears that current Firefox versions will issue a warning any time a TD or TR is given a position other than static.
With the following minimal table HTML
<table>
<tr><th>head</th></tr>
<tr><td>cell</td></tr>
</table>
and the following minimal CSS rules
th { position: relative } // either of these is enough
td { position: relative } // to trigger the warning
table { border-collapse: collapse }
this warning appears in the console for Firefox 30 and 32:
Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature
having no effect.
(the warning does not appear when the table borders are kept separate)
The source of this message is Firefox's table layout code:
/* static */ void
nsTableFrame::RegisterPositionedTablePart(nsIFrame* aFrame)
{
// Supporting relative positioning for table parts other than table cells has
// the potential to break sites that apply 'position: relative' to those
// parts, expecting nothing to happen. We warn at the console to make tracking
// down the issue easy.
So it seems we get this warning even if we're doing nothing wrong at all, because other sites may rely on the position rule doing "nothing". Is there a way to get rid of this annoying warning? It's basically telling me: Warning, what you're doing actually works!
I was getting the same warning and resolved it by applying positioning to a div inside the th or td rather than directly to the td or th. Not sure why it cares but now I don't need to see it anymore.
td div{position:relative;}
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
Have you tried this?
<table>
<tr><th><span class="pos1">head</span></th></tr>
<tr><td><span class="pos2">cell</span></td></tr>
</table>
css:
.pos1{
position:absolute;
top:25px /* example*/
}
.pos2{
position:absolute;
top:10px /* example*/
}
In the following example,
<table style="width: 100%;"><tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr></table>
How do I set the widths so that the first cell/column is exactly as wide as it needs to be to show the content of the first cell and let the second cell fill the rest of the width of the table?
I'm using a GWT HorizontalPanel to do this, so if there's either a html, css or gwt trick. Please let me know.
Thank you
Assuming that “as wide as it needs to be to show the content of the first cell” refers to width needs to show the content without line breaks, you can use something like this:
<table width=681 border><tr>
<td nowrap>First Cell</td>
<td width="100%">Second Cell</td>
</tr></table>
There is no guarantee that this will keep working, since requiring a cell to be 100% wide, yet include another cell with nonzero width, is an impossible requirement. But browsers currently do what seems to be closest to the requirement.
You could achieve the layout you’re aiming for without tables, as explained in this question:
xHTML/CSS: How to make inner div get 100% width minus another div width
HTML
<div class="two-columns">
<div class="fit-to-contents">First Cell</div>
<div class="fill-remaining-space">Second Cell</div>
</div>
CSS
.two-columns {
overflow: hidden;/* Contains descendant floats */
}
.two-columns .fit-to-contents {
float: left;
background: #ffd;
}
.two-columns .fill-remaining-space {
overflow: hidden;
background: #fdf;
}
I’m not sure if that would actually be appropriate for your use-case though, I’d need to see the context.
Tables take care of themselves in HTML. There is no need to force any cell to be any particular size.
What is it you're really trying to do?
What version of HTML are you using? (Hint: Upgrade to HTML5 and CSS!)
Just don't specify any widths at all (neither on the table nor on the cells) and use white-space: nowrap on your table cells.
Put a style of width:1px on the first cell. The table will then make the first cell as narrow as possible, without causing overflow.
Since "as narrow as possible" is the width of the word "First" in this case, you may want to throw in a white-space:nowrap too, otherwise it will display "First" and "Cell" on two lines.
Jsfiddle
I have a strange problem that I'm actually ashamed to admit. See the whole thing here:
http://jsfiddle.net/Sorcy/ng2by/1/
My problem is: the second (very small) table should actually stretch the whole width of the container. When I look at it with firebug it does (therefore the blue box to the right, which is actually the background color of the table), but the rows themselves only stretch as far as they have to to accommodate the content.
Since I don't want a big blue box beside my tables, how do I get this thing to stretch the whole width? No amount of setting width for tablerows has brought me anything, and since I can not know beforehand how many columns my table is gonna have, setting a width for the cells is also out of the question.
Only solution I have so far is writing a small Javascript that goes through the tables, counts the columns and sets the width of each on the fly, but of course I'd like a pure CSS solution much better.
Edit:
As requested, an image of how it is supposed to look:
Direct link for bigger image
I believe the main problem is this:
table {
display: block;
}
If you change the display property for tables, you are basically asking the browser to ignore it's a table and handle it as a regular element, thus leading to unpredictable quirks.
I don't know what you were trying to accomplish but it's possible that you really wanted this:
table {
border-collapse: collapse;
}
This attribute makes it easier to accomplish certain visual designs.
Update #1: A dark line after the last row of the table can be done with this simple style:
table {
/*background-color: #001F66;*/
border-bottom: 1px solid #001F66;
}
Update #2: To get a dark line after the cells of the last row replace this:
table tr:last-child td { border-bottom: none; }
... with this:
table tr:last-child td { border-bottom: 1px solid #001F66; }
I'm using a table to display tabular data, but I need to get the sizing pixel-perfect so that the contents don't end up taking more vertical space than I have available. Also, layout using css alone isn't feasible because I have dozens of elements.
Here is my simple test code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, td, tr, thead, tfoot, tbody, th, tf {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border:0;
line-height:16px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr style="height:16px">
<td>
<span style="font-size:10pt;">Here is some text</span>
</td>
</tr>
</table>
</body>
</html>
Basically I want the row of the table to take up only 16px, however, in this configuration it ends up taking 17px.
Inspecting the elements in FireBug it shows the span at 15px but the td and tr at 17, yet no padding, no border, etc...
In IE I get the same behavior, however there is a little more information about my mysterious extra pixel or two, seems there is an offset on the span element:
Finally, I can fix the problem by turning my span element into a div, (or by making the span element display:block, or even display: table-cell which I don't really understand). So I don't really need help solving my problem, but I want to understand why inline elements within table cells end up taking more space then they should. I tried google and the w3c spec but couldn't find anything useful.
Could it be something like the line-height of the span?
Edit: I realized that I didn't really answer the question. I did some poking around in Firebug (I'm on a Mac, so no access to IE at the moment), and it looks like it's not the span itself that's pushing the cell's height, but that the line-height of the td does end up controlling the height of the td. The height of the span is only 14px. I suspect that it's the empty text node (show's in IE's dev tools) that's pushing the height. One way to see this is to move the font-size specification up a node or two so that it will apply to the empty text node as well. At least in FB that seems to fix it and demonstrate that the span isn't the issue. (Maybe the empty text node doesn't exist if you use a div instead? Do you even need a span or a div, or could you have your text right in the td?)
I am working on taking an IE only site and making it cross browser. Everything is looking good in IE, Chrome, and Safari. However Firefox isn't happy.
I have a table class called "datatable" it is as the name suggests a datatable. I am trying to get it to stretch to 100% of width of the div it's contained in. The div above is 100%. When I use firebug to check it, the table is stretching to 100%. However, the tbody that Firefox generated is not stretching to 100%. So because of that the rows in the table are as small as the tbody. So I have no idea how to fix this. I tried
tbody{width:100%;} and it did nothing.
Any ideas I would greatly appreciate it.
Okay I just answered my question... inside the css there was a generic css like this...
table
{
border:0px solid #000000;
padding:0 0 0 0;
border-collapse:collapse;
border-spacing:0;
display:block;
}
I removed the display:block and everything works great now... I had looked for that on the table.datatable definition, but did think to look for a generic one in the file...
This might be silly, but make sure you're selecting the tbody correctly
#datatable tbody{width:100%}
I had the same issue,
solved it eventually by setting the width property of the header cells (i figured that's what firefox looks at to decide the tbody width).
table.table_class th { width: 115px; }
it's an option if, like me, you don't want to mess with generic css.
Check to see if you have font-size set to something lesser than 100%.
If some browsers need display:block in <table> so ...
table {
// Something..
display: block;
}
body:not(:-moz-handler-blocked) table {
display: table;
}
Example case : HTML in e-mails
Just a bit hack if you still need to preview on Firefox