Why does this table height not function?
<table border=1 bgcolor="green" width=80% height="30%">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td >
2
</td>
</tr>
</table>
http://jsfiddle.net/zQNS4/
just add the following to your css:
html, body{
height: 100%;
}
As other said, a table doesn't have a height-attriute, but most browsers intrepet that anyway. you can see the result on jsfiddle.
The reason you need to do this is that the parent element of anything that should have a height in % must have a height too (as Shadow Wizard said: "30% of what exactly?" - the parent has to have a height).
The table tag does not contain a height attribute. Try setting the height of the table using CSS styling.
table{
height: 30%;
}
<div style="height: 200px; overflow-y: scroll;">
<table border=1 bgcolor="green">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td>
2
</td>
</tr>
</table>
</div>
I just had the same issue.
I have table inside a container ( div config-table ), just setting height didn't work for me. I had to set overflow: auto ( for my case auto was needed ) and now work
.config-table {
height: 350px;
overflow: auto;
}
Related
I need a 3 column layout in HTML/CSS, but different from anything I can find on here.
What I'm really struggling to achieve:
3 Col table with a fixed width of 740px:
A fluid left column (this should expand/contract with whatever space is left)
A fixed width middle column (130px)
Auto-width right column (which is only as wide as the content, must not wrap text)
Is this even do-able? I've seen exmples of this with a fluid left, fixed right but i didn't know how to then add a 3rd auto-width column
Been driving me nuts for ages!
Added complication: Any CSS style needs to be inline, this is for an HTML email!
Thanks folks.
First of all please see the Help Center article on creating a Minimal, Complete, and Verifiable example. You should be trying out your own solution before posting here for help.
To get you started I created a quick codepen example of what you're looking for. The left section will use whatever space is available. The middle section will always be 130px and the right section will fit the width of whatever content you have. Let me know if you have any questions.
HTML
<table border="1" width="740px">
<tr>
<td>
left
</td>
<td class="middle">
middle
</td>
<td class="right">
right - this will fit to your content
</td>
</tr>
</table>
CSS
.middle {
width: 130px;
}
.right {
width: 1%;
}
Edit:
I just saw your note on making the CSS inline. You would just add the relevant CSS to style tags within the HTML instead of having an external style sheet.
New HTML
<table border="1" width="740px">
<tr>
<td>
left
</td>
<td style="width: 130px;">
middle
</td>
<td style="width: 1%;">
right - this will fit to your content
</td>
</tr>
</table>
Okay i can't beleive i wasted hours trying to get this work, yet I randomly tried this and it DID work!
<table style="width:100%; max-width:740px;" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>
https://jsfiddle.net/Murdo/5fn1z3g5/
Not sure that setting width to 100% and then limiting it to a max of 740 is the best way...
Or I could put a DIV with a width of 740 and then set the table to 100% width inside the div...
<div style="width:740">
<table style="width:100%" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td height="65px" style="background-color: cyan;">Left</td>
<td height="65px" width="130px" style="min-width:130px; max-width:130px; background-color: yellow;">Middle 130px</td>
<td width="1px" height="65px" style="background-color:green;">dynamic</td>
</tr>
</table>
</div>
UPDATE: This works great in browser.. sadly, outlook does not like DIV width, any max-width or min width either. Back to drawing board!
you can do it easly with CSS flex model.
HTML
<div class="Container">
<div>COL 1
Im taking all the rest
</div>
<div>COL 2</div>
<div>
COL 3
I'm taking excatly what i need
</div>
</div>
CSS
.Container
{
width: 740px;
height: 300px;
display: flex;
background-color: green;
}
.Container div:first-child
{
background-color: red;
flex: 1 0 auto;
}
.Container div:nth-child(2)
{
background-color: yellow;
flex: 0 0 130px;
}
.Container div:nth-child(3)
{
background-color: blue;
flex: 0 0 auto;
}
and here with Inline style (for your mail)
I need to create an HTML table with the following layout:
[Name] [Message] Date]
Where the width of [Name] should be the width of the longest name (Up to a max), [Date]should be a fixed width of 95px (And floating to the right), while [Message] should take the remaining width.
I've tried using multiple div's, but I can't get the result I need, and a table seems much simpler.
So far, the following isn't working:
<table style="width: 100%">
<tr>
<td style="width: 100%; max-width: 100px">NAME</td>
<td style="width: 100%">message</td>
<td style="width: 95px">TIME</td>
</tr>
<tr>
<td style="width: 100%; max-width: 100px">NAME OTHER</td>
<td style="width: 100%">message</td>
<td style="width: 95px">TIME</td>
</tr>
</table>
Edit 1 Seems as though this example has exactly what I need. Although I still think a table would be neater.
Edit 2 The [Message] needs to allow for multiline...
Edit 3 Here is a working sample of what I need (Exactly) based on the link in Edit 1
This cannot be done in CSS alone, due to the requirements. The first column should be flexible, which is easy (just prevent line breaks and let the column take its natural width), and setting the last column width is trivial, but telling the browser to use all the rest in the mid column (instead of expanding the first column too) cannot be done in CSS. If you set its width to 100%, things work the desired way in some browsers, but other browsers (like IE) treat it differently. You would require a width of something plus 100% plus 95px to equal 100%, which is of course impossible, and browsers handle this in different ways.
However, with a little bit of JavaScript the medicine goes down: do as outlined above, with 100%, then postprocess the table by setting the first column to a specific width in pixels (using the value allocated by the browser), remove the width: 100% setting, and set table layout to fixed—which means that the browser now has two columns width fixed width, total width set to 100%, and one column with no width set, so it is easy to it to allocate the remaining width to the mid column.
<style>
td:first-child { white-space: nowrap }
td:nth-child(2) { width: 100% }
td:nth-child(3) { width: 95px }
</style>
<table border cellspacing=0 style="width: 100%">
<tr>
<td style="">NAME</td>
<td style="">message</td>
<td style="width:95px">TIME</td>
</tr>
<tr>
<td>NAME OTHER</td>
<td>message</td>
<td>TIME</td>
</tr>
</table>
<script>
(function () {
var row = document.getElementsByTagName('tr')[0];
var cell1 = row.children[0];
cell1.style.width = cell1.clientWidth + 'px';
row.children[1].style.width = 'auto';
document.getElementsByTagName('table')[0].style.tableLayout = 'fixed';
})();
</script>
For simplicity, this code is based on the assumption that there are no other tables on the page. Modify as needed. The attributes border cellspacing=0 are there just make the cell widths more visible.
Update: This does not address the issue of setting a maximum width on the first column. That requirement is underdefined unless you specify what should happen if the width is exceeded (truncation, word wrap, wrap anywhere, wrap with hyphenation?).
try this code .
.test
{
max-width:100px;
}
<table style="text-align: center;">
<tr>
<th>NAME</th>
<th>message</th>
<th style="width: 95px">TIME</th>
</tr>
<tr>
<td class="test">NAME OTHER</td>
<td>message</td>
<td style="width: 95px">TIME</td>
</tr>
</table>
The following .css code provides the template for the attached picture:
table {
display: table;
width: 100%;
table-layout: fixed;
position: absolute;
top: 10px;
empty-cells: hide;
}
td.small:first-Child {
vertical-align: top;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
td.small:last-Child {
vertical-align: top;
width: 95px;
}
td.extend {
vertical-align: top;
word-wrap: break-word;
}
.userName a {
color: #9DC8FC;
}
<tr>
<td class="small userName">
<a title="Administrator" href="#">Administrator</a>
</td>
<td class="extend">
is it me you're looking for?
</td>
<td class="small">
10:14:01 AM
</td>
</tr>
I have this code :
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
</table>
As you can see, the first tr/td should be height 60px (min-height:60px) but in fact it isn't.
For many reasons, I can't use height directly (this code is formatted trought back office system, in a newsletter).
So, how can I take the whole height on the td trought min-height?
Also, tried putting min-height:60px; on tr, but nothing change...
min-height doesn't work for table elements:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
I can only assume this applies to td and tr as well.
What should always work is wrapping the content in a div, and applying min-height to that, as shown in this JSFiddle:
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
<div style="min-height: 60px; background-color: green">
This is my text that I need in 2 lines
</div>
</td>
Edit: You say this doesn't work with Outlook.
Alternative idea: Place a 60 px tall image in the td, and make it float: left:
<td>
<img src="..." style="float: left">
</td>
Use <td height="60"> not CSS height or min-height
For HTML email set your table cell as <td height="60"> and it will treat that as the min-height. If your content is more than 60px, it will expand accordingly.
Put a DIV in the cell, style the DIV instead.
Min-height doesn't works on tables.
It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality: min-height & max-height
But these can't be used on non-replaced inline elements, table columns, and column groups.
You can't set min-height and min-width, but you can use some CSS3 for achievements this same effect.
.default-table table {
border-collapse: collapse;
}
.default-table table td {
padding: 0;
}
.default-table tr:before {
width: 0px;
content: '';
float: left;
overflow: hidden;
height: 28px;
font-size: 0;
}
.default-table {
overflow: hidden;
}
<div class="default-table">
<table>
<tbody>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>stevesmith#gmail.com</td>
</tr>
<tr>
<td>Jone</td>
<td>Polanski</td>
<td>jonep#gmail.com</td>
</tr>
</tbody>
</table>
</div>
but if u having collapse or padding in td. You must give for .default-table table minus margin-left.
HTML :
<table></table>
CSS :
table{
height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/
min-height:100vh;
}
That's how I always resolve this problem ...
Add display block
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">
Here's a solution that works in Outlook (tested) and other e-mail clients:
<td style="mso-line-height-rule:exactly;line-height:300px;"> </td>
This is cleaner than using an image, which could negatively affect your spam score, and does the exact same thing.
If you have other content in the <td> that you don't want to have that line height, you can just wrap the non-breaking space in a <span> and set the line-height on that tag:
<td><span style="mso-line-height-rule:exactly;line-height:300px"> </span>**Other content without 300px line-height here**</td>
The reason height or min-height works on <div> tags and not <td> is because <td> are set to display:table-cell and do not respect height the same way that display:block (<div>) elements do.
I have resolved this issue by adding display:block; to its style as
<td style="display:block; min-height:200px;">
min-height does not work in td, Set height that will work like min-height and automatic increase height if needed. That is worked for me
Here is a solution that does not depend on the height in pixels. It works in all email clients:
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
<td style="font-family:Arial;font-size:12px;line-height:14px;">
<br/><br/>
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
The solution works by adding a zero-width column with two lines to the right of the first one. It uses the character, which is a non-breaking zero-width space.
It may be reviving a 2012 post, for those who searched and found this post like me:
Note: Check these addresses for the email client support before using this method, at the time of writing this answer, the support was around 50% -ish.
E-mail client support range of :first-child
E-mail client support range of ::before
table tr:first-child td:before {
min-height: 100px;
display: block;
content: ""
}
<table border="1">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
What I found !!!, In tables CSS td{height:60px;} works same as CSS td{height:60px;}
I'm having a bit of an issue getting some stylesheet behavior that I want. I'm not even sure if it's possible. Basically I'm attempting to place a table with a variable number of cells with static cell width in a DIV with overflow: auto, and my goal is that when the tables width extends past the width of the container DIV that it becomes scrollable.
This isn't the case. The cells get shrunk together. A very basic representation (with inline styles for ease on this; not actually in the application haha) of the code:
<div style="width: 1000px; overflow-x: auto;">
<table>
<tr>
<td style="width:400px;">
This
</td>
<td style="width:400px;">
Should
</td>
<td style="width:400px;">
Scroll!
</td>
</tr>
</table>
</div>
Is there anyway I can do this with CSS, or am I going to have to go back to setting the width inline on a second div containing the table through calculations?
Works if you set the width on the table itself.
<table style="width:1200px;">
The td will always shrink to the necessary size, they won't push the table wider in that situation.
using CSS can done like below but make sure you use id or class for applying css if you have more then one table or div.
<style>
div { width: 400px; overflow-x: auto; }
table { width:1200px; }
table td { width:400px; }
</style>
<div>
<table>
<tr>
<td>
This
</td>
<td>
Should
</td>
<td>
Scroll!
</td>
</tr>
</table>
</div>
This should help
<table style="width: max-content;">
I have to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?
If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax