I'm currently working on a HTML template and Outlook has been a pain in the neck. I have a row with 2 td in which they have separate contents. Is there a supported way to set the height to be equal? Currently I have set a fixed height on the td but if I scale down to mobile version on Outlook. The text would wrap to the next line and cause the height to expand causing the 2 td to have different height.
<table>
<tr>
<td>
<h3>Content............</h3>
<h3>Content.........</h3>
<h3>Content........</h3>
<h3>Content.......</h3>
</td>
<td>
<h3>Content</h3>
<h3>Content</h3>
</td>
</tr>
</table>
From the code above you can see that the first column would have a bigger height compared to the second column. How can I set the height to be equal without defining a specific height for it?. I have tried media queries however it is not supported on Outlook mobile.
Try This.....
<style>
table, th, td {
border: 1px solid black;
height:100px;
width:500px;
text-align:center;
}
</style>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
</tr>
</tfoot>
</table>
I hope you find your answer.
If I understand your issue correct, then the two td's do have same height, you just want to align top content? The height is determined by the highest element in the . Its not possible to do width css and dynamic height. Either you set a fixed, or you let the heights height rull.
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<h3>Content............</h3>
<h3>Content.........</h3>
<h3>Content........</h3>
<h3>Content.......</h3>
</td>
<td valign="top">
<h3>Content</h3>
<h3>Content</h3>
</td>
</tr>
</table>
Related
I have the following table:
Comm Layer
Implemented By
Application
Application
Transport
OS
Internet
OS
Link
OS
Link
Hardware
<table>
<thead>
<tr>
<th>Comm Layer</th>
<th>Implemented By</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td>OS</td>
</tr>
<tr>
<td>Internet</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>Hardware</td>
</tr>
</tbody>
</table>
I would like to merge the two cells that say "Link" and the three cells that say "OS". I tried using the rowspan attribute in several ways but to no avail. I was able to merge either the two "Link" cells or the three "OS" cells, but not both.
In short: you cannot have a <tr> where all cells participate in a rowspan="" because that creates a zero-height row (as there's no row-specific content). I feel this is a design flaw in HTML.
One workaround is to have a zero-width column that always has non-rowspan="" cells (which are propped up with , but hidden (using visibility: hidden;, not display: none;):
(My posted code comments out the removed cells with <!--<td>OS</td>--> for illustrative purposes, obviously you can remove those in your final version)
table {
border: 1px solid #999;
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
}
tr > *:nth-child(1) { visibility: hidden; }
<table>
<thead>
<tr>
<th> </th>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td> </td>
<td>Transport</td>
<td rowspan="3">OS</td>
</tr>
<tr>
<td> </td>
<td>Internet</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<td rowspan="2">Link</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<!--<td>Link</td>-->
<td>Hardware</td>
</tr>
</tbody>
</table>
There's probably improvements using more modern CSS techniques to enforce a minimum row height though - I've been using the technique since before I stopped using Dreamweaver in 2004.
<!-- Try this one -->
<table align="center" cellspacing="0" cellspadding=="0">
<thead>
<tr>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td rowspan="2">OS</td>
</tr>
<tr>
<td>Internet</td>
</tr>
<tr>
<td rowspan="2">Link</td>
<td>OS</td>
</tr>
<tr>
<td>Hardware</td>
</tr>
</tbody>
</table>
I am trying to add a row with double height to that of other row. But unable to make. Not sure what is wrong.
<table border="1">
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
You'll need some css to set the height of the row;
table td, tr {
height: 30px;
}
table td, tr {
height: 30px;
}
<table border="1">
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tbody>
</table>
Note; You should add a tbody to your table; What is the purpose for HTML's tbody?
Are you trying to do that ?
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td rowspan="2">A4/B4 <br>(2 rows)</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td colspan="2">C2/C3 <br>(2 cols)</td>
<td>C4</td>
</tr>
</table>
The rowspan property should only be used if you are trying to have one cell appear across two rows (as if you are using the Merge Cells functionality on Excel). If you want to make one row twice as high as the other, this is a display property and should be done with css or inline styling. The middle (row) should also be removed.
If this is just a general example and you need to use it on something more complex. If you use rowspan on say 1 element, you will need to make sure that the following row has 1 less td element otherwise it will not display correctly.
<table border="1">
<tr style="height: 50px">
<td >A1</td>
<td >A2</td>
<td >A3</td>
<td >A4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
I've inherited a web application from about 2005 that has lots of table-styling in it, see https://jsfiddle.net/6t7r1fma
<table style="height:50px">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
The issue is that I want the inner table to be as large as I want, but contained in the overflow div which can be scrolled vertically. It works in Chrome but not in Firefox (less important) and IE (more important). What's happening is that the overflow div is taking the height of the child table instead of the parent table, and the result is that the inner table is displayed in its entirety.
Any thoughts? Rewriting the HTML is not really an option, so hopefully there's a CSS solution.
Unfortunately, the way tables work can be summed up by: they size themselves around content. The only solution you have is to pass the max-height from the outer table onto the <div> inside its cell.
If you'd rather do that dynamically, without changing your markup (which would be the right way to go), you could:
hide the contents of your table entirely, using CSS and let the cell get normal size
on page load (after the table was added to DOM and rendered), get the height of the parent <table> and place it as max-height on the <div> contained in your <td>. Of course, this can only be done in javascript.
Besides the above, the only other option you have is placing the max-height on the div inside the td directly (which is what the solutions below do using javascript).
Note I added an id on general principles, to contain it, but as long as you know what you're doing, and this doesn't affect anything else, you don't really need it. Proof of concept:
var divs = document.querySelectorAll('#fix>tbody>tr>td>div');
[].forEach.call(divs, function(div){
div.style.maxHeight = div.parentNode.clientHeight + 'px';
div.style.display = 'block';
})
#fix>tbody>tr>td>div {display: none;}
<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
If you're already loading jQuery in the project, you should probably use this instead (haven't tested, but it should include IE8, which the above doesn't):
$('#fix>tbody>tr>td>div').each(function(){
$(this).css({
"max-height":$(this).parent().height() + 'px',
display:"block"
});
})
#fix>tbody>tr>td>div {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Note that due to user agent default styles, table elements might be rendered in different browsers with small spacing (cellpadding and cellspacing) (usually 1-2px) and those will be deducted from the available height. You could prevent this behavior by setting both cellpadding and cellspacing to 0 on the parent <table> (like I did) or by resetting user agent default styles for <table> elements.
Can you add a display block to the parent table and it's table body, table rows and table cells? This works in Firefox and IE 11 (not sure how far back you have to go.)
https://jsfiddle.net/fwuzqo3o/
<table style="height:50px; display: block;">
<tbody style="height: 100%; display: block;">
<tr style="height:100%; display: block;">
<td style="height:100%; display: block;">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I am having troubles trying to make this work the way I want.
I have a table with a fixed height. And all tr I put inside this table grow in height to use all available table's height, although tr have a specific height
For example my table has widht: 1000px and if I only have 1 row, this row will be 1000px high, if I have 2 rows, each one will be 500px high
Here is a simple fiddle https://jsfiddle.net/6wfbohbh/2/
table { height:1000px; }
tr {height: 100px; }
How can I have the tr use their heights and not be relative to the tables height?
do not set height unless you need it :
example shrinking header to the height it needs to hold content and let other rows to spray.
table {
height:400px;/* to see demo */
float:left;
border:solid red 1px;
}
/* see tds */
td {border:solid;}
<table>
<thead>
<tr style="height:1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr style="height:1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
</tbody>
</table><table>
<thead>
<tr >
<td>no height given on thead tr</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
that's about what you can do if td's content is even ...
If you want to keep tr's to that 100px height even there is not enough to keep them, then use a pseudo to fake last row:
tbody:after {
content:'';
display:table-row;
height:100%;
}
<table style="height:1000px;">
<thead>
<tr style="1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr style="height: 100px;">
<td>Hello</td>
<td>Hola</td>
</tr>
<tr style="height: 100px;">
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
I am not sure what you end result should look like, but if you need to specify a width of a container, why dont you use div instead. Here is your updated example:
https://jsfiddle.net/6wfbohbh/8/
<div style="height:1000px; background:lightblue">
<table style="background:lightgreen">
<thead>
<tr>
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr style="height: 50px;">
<td>Hello</td>
<td>Hola</td>
</tr>
<tr style="height: 50px;">
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
</div>
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/