The code below shows a table with a "rowspan" option at the first cell.
Depending on the browser used (ie, firefox and chrome), the ratio of the height of the detail lines differ.
My question: Is there any way to standardize this behavior, whatever it is?
Thanks for the tip.
<table border=1>
<tr>
<td rowspan="3">GroupCell<br><br><br><br><br><br><br></td>
<td style="vertical-align:top;">Detail 1</td>
</tr>
<tr>
<td style="vertical-align: top;">Detail 2</td>
</tr>
<tr>
<td style="vertical-align: top;">Detail 3</td>
</tr>
</table>
Simply adding a fixed height to the td will help to standardize the heights across browsers.
CSS:
td {
height:50px;
vertical-align: top;
}
See Fiddle.
Related
We have a table as follows:
<table style="margin-top: 10px; float:right;">
<tr>
<td></td>
<td align="right">SubTotal</td>
<td align="right">${subtotal}</td>
</tr>
<tr>
<td></td>
<td align="right">Tax</td>
<td align="right">${tax}</td>
</tr>
<tr>
<td></td>
<td align="right">Total</td>
<td align="right">${total}</td>
</tr>
</table>
The third column should have a fixed interval to the second column no matter how long the value inside it is.
Can anybody give me some suggestion?
There are two ways to go about it:
using padding
using an empty column
It boils down to whether or not it matters if the space is added in between the columns or inside one of them.
padding-right on 2nd column example:
td:nth-child(2) {
padding-right: 30px;
}
padding-left on 3rd column example:
td:nth-child(3) {
padding-left: 30px;
}
empty column example:
td:nth-child(3) {
width: 30px;
}
<table>
<tr>
<td></td>
<td align="right">SubTotal</td>
<td></td>
<td align="right">${subtotal}</td>
</tr>
<tr>
<td></td>
<td align="right">Tax</td>
<td></td>
<td align="right">${tax}</td>
</tr>
<tr>
<td></td>
<td align="right">Total</td>
<td></td>
<td align="right">${total}</td>
</tr>
</table>
IMPORTANT (deprecation notice)
Do NOT use cellpadding.
It has been deprecated in HTML5, along with align, bgcolor, border, cellspacing, frame, rules, summary and width.
Current browser behavior for cellpadding is: disregard if padding has been defined. Which means it will be ignored if the cell element has a defined value for padding anywhere in currently applying CSS.
It is expected to be ignored by all major browsers in the future, regardless of padding value.
If, for any reason, you find yourself needing an obsolete HTML feature to work, you can specify the DOCTYPE attribute accordingly. While it will make the deprecated features work, it might disable more modern features, which were not available in the HTML version you want to use.
Having an issue with table CSS where the height of a table nested inside of a TD is not adjusting it's height when a TD in the same TR has it's height overflow (and it must be able to do so).
I have a table layout that looks roughly like this, and there is a min-width property on the TDs:
<table>
<tr>
<td id="TableCellA">Customer Admin User Account</td>
<td>
<table>
<tbody>
<tr>
<td>Content A</td>
<td>Content B</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
A visual example of what happens is here:
I want the borders on the TDs to adjust height when the height of TableCellA changes. Any suggestions on how to achieve that accepted!
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/
I am trying to fix the width no matter of what the content is. But, the width of the table is changing according to it's content. How can I fix it?
Here is my code:
<style>
table{width:25px; background:#66f;}
</style>
<table>
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>
Try this
<table>
<tbody><tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td style="word-break: break-all;">Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</tbody>
</table>
You need to use table-layout: fixed; and provide width to your table and td elements accordingly.
You should also use word-wrap: break-word; so that you don't get in trouble if you encounter a non-breaked string
Demo
you don't mentioned style class table with dot extension and it won't be called using class attribute.
Here is the code:
<style>
.table{
width:25px; background:#66f;
}
</style>
<table class="table">
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>
I found this topic, mine is related but not the same:
Table rendering with cols and colspan on tds in IE9
The problem I am having is that the 2nd colspan=2 in my table is not being read by IE9, funnily enough it works find in IE7 and IE8, but not IE9. Maybe I've done something completely wrong so here it is:
HTML:
<table id="test">
<tbody>
<tr>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
</tr>
</tbody>
</table>
CSS:
#test {
width: 100%;
border-spacing: 20px;
border-collapse: separate;
table-layout: fixed;
}
#test td {
position: relative;
background-color: #cccccc;
box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
padding: 10px;
}
jsFiddle: http://jsfiddle.net/DUCPp/1/
What is supposed to happen:
What IE9 gives me:
I am convinced this is a IE9 bug, but I haven't been able to find it on google (maybe I'm not searching the right keywords?). Any solutions or links to bug reports will be greatly appreciated!
UPDATE:
I added an extra column after the 2nd colspan=2 column, and it will render correctly. I have deduced that if the last column in a row has colspan > 1, then it will only be rendered as if colspan = 1.
Any ideas on fixing? I'm now almost positive that this is a IE9 bug <_<
Heh... IE9...
Found a "fix"... idea came from: Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?
Basically I had to add a empty row with the correct # of empty cells in it:
<table id="test">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
<td>COLSPAN = 1</td>
<td colspan="2">COLSPAN = 2</td>
</tr>
</tbody>
</table>
Not pretty... and I needed to remove the padding for the cells in order for it not to display. Sigh...
jsFiddle: http://jsfiddle.net/DUCPp/5/
What you want to do is set the width of columns through TH in the header because that's what the browser will use for determining the width of the table and columns in subsequent rows.
Have a look at the following example:
<table>
<thead>
<tr style="height: 0px;">
<th style="width: 110px; height:0px;"></th>
<th style="width: 160px; height: 0px;"></th>
<th style="width: 210px; height: 0px;"></th>
<th style="width: 110px; height: 0px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Hello</td>
<td>There</td>
</tr>
</tbody>
</table>
You don't appear to have defined any fixed widths for the columns. You should use something like this before the <tbody>:
<col span="6" style="width:16%;" />
I fixed a similar issue by adding the doctype declaration at the start of my HTML code. See http://www.w3.org/QA/2002/04/valid-dtd-list.html
The specific declaration I added was for version 'HTML 4.01 Transitional'.
i.e. placed before the initial tag.
Hope this helps?