I've got a table that displays fine in Chrome, IE8, and IE9. In IE7, however, the table ends up being much wider than its content (100% of containing element?). How do I make the table only as wide as its content in IE7 and IE6 (and continue to display fine in newer browsers)?
Here's the table:
<table class="SisSubDetailTable">
<tbody>
<tr>
<td>Date:</td><td>10-16-11</td><td>SOID:</td><td>SUST — Sustaining </td>
</tr>
<tr>
<td>Status:</td><td>25 characters' worth of data</td><td>Work Order:</td>
<td> </td>
</tr>
<tr>
<td>Company:</td><td>6K8 — KAPCO</td><td>Sub:</td><td>9999 </td>
</tr>
<tr>
<td>Store:</td><td>34 characters' worth of data</td><td>Export Price:</td>
<td>$0.00</td>
</tr>
<tr>
<td>Class:</td><td>26 characters' worth of data</td><td>Control Ship:</td>
<td>N</td>
</tr>
</tbody>
</table>
The following CSS seems to make the cells narrow, but the table as a whole is still much wider than 400px:
table.SisSubDetailTable
{
width: 400px;
}
table.SisSubDetailTable td
{
border-width: 0;
width: 100px;
}
You should set its width property in css. Use guess and check to figure out how big you want it.
If you are not already doing so, set the value in pixels and avoid other units.
Related
I've got a basic HTML table that uses rowspan.
CSS
html, body{
height: 100%;
width: 100%;
}
table, tr, td{
border:1px solid #f00;
border-collapse: collapse;
}
HTML
<table>
<tr>
<td>top image</td>
<td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
<td>bottom image</td>
</tr>
<tr>
<td>image</td>
<td>text</td>
</tr>
<tr>
<td>image</td>
<td>text</td>
</tr>
<tr>
<td>top image</td>
<td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
<td>bottom image</td>
</tr>
JS Fiddle
http://jsfiddle.net/38ro2p39/1/
In Firefox (36), Chrome (40) and IE10 it looks like I'd expect that the "Top Image" and "Bottom Image" cells are of even size.
In Safari (5.1.7 for Windows) the "Top Image" cell is the height of it's content, and "Bottom Image" fills the rest of the space.
I don't want to specify any sizes for rows/columns as the content changes size and needs to stretch.
Any ideas why this happens, or how I can get around it?
Thanks!
PS. I'm up for alternatives to tables. I did look at using <div> with table-layout but it lacks rowspan.
EDIT
Thanks to Pete for pointing out Safari for Windows is ancient. A friend using Safari 7.1.2 for Mac OSX confirms the issue still occurs in that version.
According to the spec:
CSS 2.1 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.
I can't find a CSS method of fixing this, but I've come up with a JavaScript method, which works for your code:
var td= document.querySelectorAll('tr td[rowspan="2"]');
for(var i = 0 ; i < td.length ; i++) {
if(Math.abs(td[i].offsetHeight/2 - td[i].parentNode.children[0].offsetHeight) > 1) {
td[i].parentNode.children[0].style.height = td[i].offsetHeight/2 + 'px';
}
}
Basically, it gets all tds having a rowspan, and it sets the other td in their row to be half their height.
Working Fiddle
Chrome has a bug that seems unlikely to get fixed anytime soon:
https://code.google.com/p/chromium/issues/detail?id=178369
Basically it happens that Chrome can't handle column widths correctly if the cells themselves contain "width=100%" elements.
I need the 100% width elements in the cells.
Does anybody know a workaround for that bug?
Testcase:
<table style="width: 800px; border: 1px solid black">
<tr>
<td>
<table style="width: 100%; border: 1px solid blue">
<tr>
<td style="width: 100%; background: red;">
1
</td>
</tr>
</table>
</td>
<td>
<table style="width: 100%;">
<tr>
<td style="width: 100%; background: green;">
2
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Simply adding
table-layout: fixed
for the outer table should do it. http://jsfiddle.net/ysqx6j4t/
NOTE: Chrome ignores td style widths unless they are set in very first row of a table. (IE used to do that about 15 years ago.)
So you can't have a single td and colspan=n in first row.
I apologize in advance for this being a response and not answer...
It seems that the bug has now infected not only Chrome, but also newer versions of Opera and Vivaldi. None of these work-around suggestions work with Chrome, Vivaldi, Opera (newer releases!), even if style widths are set in the first row, and especially if any column in that first row has a 'min-width' set -- a greedy (ie 100% is ignored).
Setting a column width to 100% so that is 'greedy' DOES work in all versions of Firefox (all the way back to version 3.5!). It also works in Opera 12 (!) but not Opera 65 -- [which shows that just copying someone else's code is not always productive.]
An aHA moment -->
The actual bug is this:
If a cell (in any column, not necessarily the first col in the first row) spans multiple columns, and attempts to force the colspan to be greedy, that ends up being applied to the first column ONLY - not to the group.:
So,
<!-- EXAMPLE 0 -->
...
<tr >
<td colspan=4>
<td colspan=8>
<table border=0 cellspacing=0 cellpadding=0 width=100% style="font-size:11pt;">
<tr style="font-size:8pt;">
<td width=100%><hr>
<td class=pnote> SYNOPSIS / EXAMPLE</tr>
<tr ><!-- THIS IS WHERE IT WENT WRONG IF THE CELL
had any markup in addition to colspan=2 -->
<td colspan=2><b>layerinfo = </b>App.Do (Environment, 'ReturnLayerProperties', {})
<!-- another solution is to encapsulate everything in this row/cell in another table ...
<td colspan=2><table width=100%...
</table>
-->
<tr style="font-size:8pt;">
<td width=100%><hr>
<td class=pnote> RETURNS</tr>
<tr >
<td width=100% nowrap><b>layerinfo : {</b>
<td class=pnote> </td>
...
</table></tr>
And the result now is correct [(a) the and the label no longer split the row equally, nor (b) the text on the spanned cell no longer defines the width
of the first column of the table. (wierd, but it happened)
I have the following markup:
<table class="someclass">
<thead>
<tr>
<td>
<div>
<h1>Click to change height</h1>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>(repeated many times)
<td>some text</td><td>some other text</td>
</tr>
</tbody>
</table>
and the following styling:
tbody {
display:block;
overflow:auto;
}
table {
height:200px;
}
currently the <h1> has some jquery that ultimately changes the height of its parent (and i'd assume the height of the <thead>.) The <table> should maintain it's height and the <tbody> should shrink to fit. currently what I have is working in webkit (chrome and safari) and failing miserably in IE and Firefox. most questions I see have the reverse issue and I am perplexed as to why this is happening.
edit here is the jQuery:
$(".someclass h1").click(function(){
$(this).parent().css("height", "150px");
});
http://jsfiddle.net/kXCX6/2/ (this is behaving the way I want, my code is not behaving this way even though it is structurally identical)
I'm making a tabular layout and I really need:
2 columns, of variable width
columns have the same width
columns are no wider than necessary
I have found that "table-layout: fixed" can achieve this, if I set both columns to have "width: 50%". Here's an example:
CSS:
.mytable {
border-collapse: collapse;
table-layout: fixed;
}
.fifty {
width: 50%;
}
HTML:
<table class="mytable" border=1>
<tr>
<td class="fifty">hello</td>
<td class="fifty">x</td>
</tr>
<tr>
<td class="fifty">a</td>
<td class="fifty">longer</td>
</tr>
<tr>
<td class="fifty">reallyreallylong</td>
<td class="fifty">medium</td>
</tr>
</table>
This is exactly what I want, and I'm happy, except that everything goes out the window when this table appears within another table. In that case, all columns shrink to the minimum possible size (at least for my version of Chrome).
Here is a jsFiddle demonstrating my dilemma: http://jsfiddle.net/KTkZm/
Can anyone shed light on this, and hopefully find a way to get the inner table to render as it does outside of the table? Thanks!
Check below jsfiddle link. It's Working Fine.
http://jsfiddle.net/KTkZm/14/
I have a table where all columns need to be an exact minimum width.
If the table does not fit into it's container div the table will go into a scroll.
This is my setup:
<table>
<tr>
<td class='cell'>1</td>
<td class='cell'>2</td>
</tr>
</table>
.cell {
width: 10em;
min-width: 10em;
}
This works in every browser but IE7 because min-width is not supported, is there a workaround for this?
check this:
http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
Its easier than you think:
<table>
<tr>
<td width=60>1</td>
<td width=80>2</td>
</tr>
</table>
http://jsfiddle.net/V8jny/
#div {
width:XXXpx; // the static width u want
height:XXXpx; // the same with the height
overflow:scroll;
}
hope, thats what u're looking for.
g.r.