I am trying to have my table header be static, but whenever I do this the th and the td widths end up changing. I am doing all of this using CSS. The way that I am making the table header static is by making its position fixed.
I have tried setting the th and td widths to be the same, but that doesn't work.
#idOfHeader th { width: 20px; }
#idOfBody td { width: 20px; }
I dont' see why you'd have to use min-width, max-width or <col>. I think the likely cause of the different widths is either that there is content somewhere forcing a cell to be wider than desired, or the tds and ths have different padding. The total width of a cell is its width plus its padding.
Unless the padding is specified somewhere, the browser's default paddings will be applied and I guess the padding of the th is likely to be bigger than that of the td
th,td{
width:20px;
max-width:20px;
min-width:20px;
}
maybe your padding makes such difference
Use col tag in html
<table border="1" width="100%">
<col width="100">
<col width="50">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
fiddle
Related
table,
td,
th {
border: 1px solid;
border-collapse: collapse;
}
table,
th,
td {
width: 100%;
}
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
In this example, I am applying width of 100% to table, td and th, and I don't understand the outcome. Why is the first th and td taking all the space while the last th and td are shrunk at the end?
If I use smaller percentage, it works as expected.
table,
td,
th {
border: 1px solid;
border-collapse: collapse;
}
th,
td {
width: 100%;
}
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
In the next example, I remove the 'table', and only set the width of 100% to th and td, and the result is the same, BUT, if I now start reducing the width in percentage, they behave in a very illogical way. Seemingly the more I increase the percentage, the more the table enlarges. At 10% the table size is clearly larger than half the screen, but at 50%, it's closet to 100px.
table,
td,
th {
border: 1px solid;
border-collapse: collapse;
}
th,
td {
width: 50%;
}
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
I understand that th and td are child-elements, and the table element has like a family of tags that work together, but still, is there some logic behind this outcome, or is it completely random and illogical, and purely the result of the tag family not working together?
Note that, th and th work as expected if you use width in pixels instead.
The table layout algorithm is notorious. The CSS 2.2 spec leaves such situations completely undefined. The only alternative we have is the CSS Table Module Level 3 spec which is a draft clearly marked as "Not ready for implementation", but nonetheless does a better job of trying to describe what browsers actually do currently.
The layout algorithm there is very complicated, too complicated to reasonably be summarized here even if I fully understood it, which I don't. It depends on the interaction of multiple minimum, maximum, and preferred widths over multiple passes to determine the final widths.
However, we can see that in the step intrinsic percentage width of a column, it says that the width of each column uses:
100% minus the sum of the intrinsic percentage width of all prior columns in the table (further left when direction is "ltr" (right for "rtl"))
which clearly favours giving the available width to the earlier columns over the later ones, which is what you see.
Why don't you try changing 100% to some px value? Cuz if you put it 100% like that then the first td and th will just take up all the space and ended up like what you described
How can I stop a td with lots of text making the td above it the same length?
In this example the outline for the cell containing '1' shows its as wide as the cell containing 'long text here'. What I want is for the cell containing '1' to only be as wide as it needs to be to fit the text it contains.
Can this be done with CSS?
http://jsfiddle.net/r7yXD/1/
<table>
<tr>
<td>1</tRund>
<td>2</td>
</tr>
<tr>
<td>long text here</td>
<td>.</td>
</tr>
</table>
td {
border: 1px solid red;
}
So looking at the image below, the first example is what happens and I understand why, but can I make the 2nd option happen instead with CSS?
You can't. Its the nature of a table to make the td's the same width.
You could however add additional td's and use colspan="2", but to be honest, if you need to do such a thing, especially for texts, you probably shouln't be using tables.
Have you tried something like this
<style type="text/css">
td {
border: 1px solid red;
}
</style>
<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="2">long text here</td>
<td>.</td>
</tr>
</table>
As stated in the comments this is not possible using a <table>-element. You can read more about it here at w3.org: "17.5 Visual layout of table contents".
It says:
The visual layout of these boxes is governed by a rectangular, irregular grid of rows and columns. Each box occupies a whole number of grid cells, determined according to the following rules.
And interesting for your case is from rule number 5:
[…] Each cell is thus a rectangular box, one or more grid cells wide and high. […]
Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!
It's very simple, but I don't understand why it doesn't work:
I have a table inside a cell, and I have style="text-align:right" on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.
Code is basically:
<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:right">
<table border="1">
<tr><td>Hello</td><td>Hello 2</td></tr>
</table>
</td>
<td>Hello 2</td>
</tr>
</table>
I don't want the nested table to be width=100% or anything like that...
Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?
My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.
I would like to add that the CSS way to align tables relative to its container is with the margin property.
You must add margin: 0 auto; if you'd like to align it to the center, or margin-left: auto; if you'd like to align it to the right.
As #maxedison says, text-align will work only with inline and inline-block elements, so the other solution is change your inner table to take some of those display values.
You also need to remember that text-align works from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a p to affect its inline content such as the text within), and margin: 0 auto works from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a div to center it to its parent).
If you want to fix it (not with full functionality), you can write this:
table {
display: inline-block;
}
This makes your table able to be centered with text-align: center;, if applied to the parent element(s).
when you don't want the div to be floating, you may try this :
http://jsfiddle.net/NvEZ8/
<div style="text-align:right;">
<table style="display:inline-block">
<tbody>
<tr>
<td></td>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
</div>
It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome
I've got a problem and I'm desperate for help.
I needed for some reason to render table header and table body separately. Each column and header cell have got same css class (eg. .col1_name). Those css classes have got declared width and text-align, and in that manner i'm making sure that header and table body cells stay aligned properly.
And, everything is OK in IE8 and Firefox. I've got problems with WebKit browsers (Chrome and Safari. Chrome is important for me.) They are rendering width of table body cells 5px less than IE and FF. I could not trace the problem, but I saw that those -5px widths are in Computed styles.
Below are s-shots and some sample code.
IE 8 Is just fine http://img191.imageshack.us/img191/2360/probie8.png
Firefox is just fine http://img705.imageshack.us/img705/661/probff.png
Google Chrome is not so fine http://img199.imageshack.us/img199/5176/probgc.png
Inspecting element ... http://img96.imageshack.us/img96/19/probj.png
<style type="text/css">
.rbr{ width: 45px; text-align: left;}
.sifra {width: 90px; text-align: left;}
.naziv { width: 240px; text-align: left;}
.kolicina {width: 90px; text-align: right;}
.cena {width: 60px; text-align: right;}
</style>
<table id="tableheader">
<thead>
<tr>
<th class="rbr">RB.</th>
<th class="sifra">Sifra</th>
<th class="naziv">Naziv</th>
<th class="kolicina">Kolicina</th>
</tr>
</thead>
</table>
<table id="tablebody">
<tbody>
<tr>
<td class="rbr">1</td>
<td class="sifra">11111112</td>
<td class="naziv">Adelante 3 series</td>
<td class="kolicina">2.00</td>
</tr>
<tr>
<td class="rbr">2</td>
<td class="sifra">86868631</td>
<td class="naziv">Canyon CNR</td>
<td class="kolicina">1.00</td>
</tr>
</tbody>
</table>
Many thanks people for any help!
While I suspect you simply have another declaration overriding the one you expect, try adding a min-width and max-width.
#NSD you got me on right track. I re-re-re-re-viewed my entire code that is working with datagrids, and I found that body table got width set to auto.
So, thank you guys for your time.
Conclusion: if you have same cells width, but different table width (ie. xyz px / auto ) , in Chrome you'll get different cell widths.
Again, thank you for your time.
Did you try to also set margin and padding?
margin: 0;
padding: 4px;
In your code the id is 'table-body' but in the Chrome screenshot it says 'table-bodypozicije'.
Check your css for a definition of 'table-bodypozicije' - this may be overiding your class styles applied to your td's.
I have a row <tr> that has a few columns <td> in it. I have a background image set to the <tr> but it restarts the background image for each <td> as if it were individually set for each <td>. I would like the one image to span across the background for all the columns in that row.
Is there a way to do that?
here is my code:
<tr bgcolor="#993333" style="color:#ffffff; background:url(images/customer_orders/bar.gif) no-repeat;">
<td><strong>Product(s)</strong></td>
<td width="7%"><div align="center"><strong>Qty</strong></div></td>
<td width="11%"><div align="center"><strong>Total</strong></div></td>
</tr>
Thanks!!
It won't change anything if you replace background-repeat property with 'repeat'.
The fact is TR does not support backgrounds and you must do it different way.
If you can use divs - go for it. If you must use table, move your header to seperate table and apply background to this new header-table. This is not perfectly correct but will do the job. If I was you I would use bar.gif graphic that I can repeat-x across all header tds.
<table style="background:#993333 url('images/customer_orders/bar.gif'); color:#fff;">
<tr>
<th>Product(s)</th>
<th>Qty</th>
<th>Total</th>
</tr>
</table>
<table>
<tr>
<td>data1</td>
<td>tdata2</td>
<td>data3</td>
</tr>
</table>
You will probably have to set the background position separately on each <td>. <tr>s don't support most css properties.
For example, in the simple case where left and right columns are equal widths:
tr td{ background-position: center; }
tr td:first-child { background-position: left; }
tr td:last-child { background-position: right; }
This obviously gets much more complex when you the widths are different, and in your case with % widths, you would probably have to do some javascript to get the actual location of the middle column.