I need to create a table of the following characteristics:
________ 100% of the window width ________
| auto width | 860 px width, border | auto width, border
So in other words: a centered cell of 860px surrounded by one other cell on each side. The right cell also has to have a border set.
I can't come up with something friendly to all (even old IE6) browsers. The compatibility is important for me. I don't really care if it's table or a bunch of divs. Do you have any ideas?
Thanks
Sorry for this very quirksmode markup, but it looks like it does what you've described:
Edited: added table-layout:fixed for table and width="860" for the central td:
<style type="text/css">
table{ table-layout: fixed; }
.w860{ width:858px; }
.brdr{ border-style:dashed; border-width:1px; }
.td860{ background-color:#eee; }
</style>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><div></div></td>
<td width="860" class="td860">
<div class="w860 brdr">
content
</div>
</td>
<td>
<div class="brdr"> also some content</div>
</td>
</tr>
</table>
Tested in FF, IE6+ (quirksmode and standards), Safari for windows.
<style>
table{
width:100%;
}
.auto{
width:auto;
}
.fixed{
width:860px;
}
.bordered{
border: 1px #ff0000 dashed;
}
</style>
<table>
<tr>
<td class="auto">11 </td>
<td class="fixed">111 </td>
<td class="auto bordered">111 </td>
</tr>
</table>
Related
I have the following simplified layout:
jsfiddle: http://jsfiddle.net/rersW/
<table>
<tr>
<td style="border:1px solid black;height:300px;width:100px">A</td>
<td style="border:1px solid black;height:100%">
<div style="border:1px solid blue;height:100%;width:100px">B</div>
</td>
</tr>
</table>
I need the blue outlined div to fill its cell. I've tried box-sizing on the div and the cell as well as changing the display of both (inline-block, etc.). Nothing I try is working.
The contents of cell "A" determine the height of the table.
The contents of cell "B" determine the width of its cell.
It must work identically in Chrome, Firefox, Safari, Opera & IE 8+
TIA
Height:100% requires that the parent has an explicit height. Set the same height in cell b as you do in cell a, which is determining the table height, in this case 300px and the child div will expland.
EDIT
If you can't explicitly define any of the parent heights you will need to use JS/Jquery. See here http://jsfiddle.net/rersW/3/
Try this and post comments if it is not quite right :|
http://jsfiddle.net/rersW/1/
The reason is height: 100%; needs to be have a parent with height defined , or else you have to
either fix the height.
or Chain height: 100% all the up to body, if no height is fixed anywhere
TO illustrate my point upgrade your markup to this
<td valign="top" style="border:1px solid black; height: 300px;">
<div style="border:1px solid blue;height:100%; display: block;width:100px">B</div>
</td>
Demo
UPDATE:
I've come up with something that works w/o JS:
<table>
<tr>
<td>
<div style="position:relative">
<table>
<tr>
<td style="border:1px solid black;height:300px;width:100px">A</td>
<td style="border:1px solid black;height:100%">
<div style="border:1px solid blue;box-sizing:border-box;height:100%;width:100px"> </div>
</td>
</tr>
</table>
<div style="border:1px solid red;height:100%;position:absolute;right:0;top:0;width:100px">B</div>
</div>
</td>
</tr>
</table>
Doesn't look pretty when rendered but the production structure doesn't have borders or padding.
Any simpler solutions would be preferred.
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 have the following structure
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:60px;">
...
</td>
<td>
<div style="width:100%;overflow-x:hidden;">
PROBLEMS ARE HERE
</div>
</td>
</tr>
...
</table>
The first td takes 60px, the second one takes the rest of the 100%, but when I have some long text with no spaces and no dashes the table becomes larger then the 100%.
How to display the non-breakable text in one line or on multiple lines (both ways are acceptable) and keep the table on 100% of the screen?
I've tried to fix this with overflow-hidden but it has no effect.
Here's a screenshot of the problem:link
Set table-layout : fixed in your css or <table style='table-layout : fixed'> that oughta fix it.
Here is the code sample. Check it out.
try the following:
<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:60px;">
...
</td>
<td>
<div style="width:100%;overflow-x:hidden;">
PROBLEMS ARE no longer HERE !
</div>
</td>
</tr>
...
</table>
There is a CSS3 property, word-wrap:break-word; that does exactly what you need. But unfortunately it doesn't work with table cells. I think you need to rethink your structure, opting for a table-less design.
I wrote this example for you
<style>
section { /* your table */
display:block;
width:300px;
background-color:#aaf;
}
section:after {display:block; content:''; clear:left}
div { /* your cells */
float:left;
width:100px;
background-color:#faa;
word-wrap:break-word;
}
</style>
<section>
<div>Content.</div>
<div>Loooooooooooooooooooooooooooooooooooooooong cat.</div>
</section>
P.S: word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
How do you make individual table columns fixed for a certain width so no matter how much text is in that column, the width of the column stays the same?
<col> tag is only good for firefox
table-layout:fixed is for whole table really
Just setting a width does not do it
what is the best css property to use for this
Below is code:
.video{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.audio{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.image{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.qid2{
overflow:hidden;
table-layout:fixed;
max-width:92px;
}
<table border=1 id="vidtbl">
<tr>
<th>Question No</th>
<th>Video</th>
<th>Audio</th>
<th>Image</th>
</tr>
<tr>
<td class="qid2"></td>
<td class="video">images/dolphinvideo.png//////////////////////////////////////</td>
<td class="audio">hello</td>
<td class="image"></td>
</tr>
</table>
You can wrap the contents of the <td> in another tag with width and overflow:hidden. For example:
<table>
<tr>
<td class="fifty">
<p>Lorem ipsum dolor</p>
</td>
</td>
</table>
And the CSS:
.fifty p { overflow:hidden; width:50px; }
You can use width attribute in td tag
<td width="100px">
or you can use style attribute
<td style="width:100px">
or you can define it in css file
.tdstyle{
width:100px;
}
and specify the class in td tag
<td class="tdstyle">
If setting td's width to a fix value does not work for you:
<td width="100">..</td> or <td style="width:100px">...</td>
Wrapped the content to a div and set the overflow as hidden:
<td><div style="width:100px;overflow:hidden;">...</div></td>
Css class will be much efficient and easy to maintain though:
.col120 { width:120px; overflow:hidden;}
<td><div class="col120">content...</div></td>
try using
max-width:100px;
or
max-height:100px;
This will let your column expand maximum upto the width you set.
I can't get colspan to work when I use a fixed width (IE 7)? Why?!
Sample Code:
<html>
<head>
<style>
.inputGroup td
{ width:250px; }
</style>
</head>
<body>
<table class="inputGroup">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td colspan="2">This should span two columns but it doesnt</td>
</tr>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
</body>
</html>
Help anybody? :(
it does, but you've limited the width. If you want, try creating another class called '.doubleSpanInputGroup' or something with width 500 and set that class onto the spanning column.
eg.
<html>
<head>
<style>
.inputGroup td
{ width:250px; }
.inputGroup td.doubleInputGroup
{ width:500px; }
</style>
</head>
<body>
<table class="inputGroup">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td colspan="2" class="doubleInputGroup">This should span two columns but it doesnt</td>
</tr>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
</body>
</html>
EDIT: made the new style more hierarchical
Try making the rule apply to tr instead of td and make the width 500px instead, as such:
.inputGroup tr { width: 500px; }
The problem you're having is because you've set a limit on the td to be at most 250px wide, so the browser is simply following your instructions.
in general manner :
table tr:first-child td:first-child{ width:86px; }
if this is the only width all first column take this width and colspan in ie7 will work
I tried to set the width of the colspan cells to auto, seemed to work fine in IE7/8/9
.yourColSpanTD { width: auto !important; }