I have a table and I've set the <td> tag width = 60px
but if I put a string, its width increases!
How can I make it absolutely fix? While if this will be little for a string only its height increases, not its width.
I want to have no width change in my table and put several tables under each
other as seems they are just one table.
<td style=" width="50px">
What shall I do to have a table with this property?
Use <col> tag and set the table-layout:fixed style on the <table>
<table class="tableFixedCell">
<col width="50px" />
<tr>
<td>content here</td>
</tr>
</table>
CSS
table.tableFixedCell {
table-layout:fixed;
}
table.tableFixedCell td {
overflow: hidden;
}
I have 3 tables that I use. I want :
one on the page left
one on the page in the center and
one on the right
All on the same height
The tables can expand and when I use float the expanding goes over the content under it due to the float and I dont want that.
Table code is:
<table id="budget">
<tr>
<th>Project name</th>
<th>Deadline</th>
<th></th>
</tr>
<tr>
<td>Project 1</td>
<td>24/1/2014</td>
<td><div class="arrow"></div></td>
</tr>
<tr><ul>
<td colspan="5">
<li> Your total hours: 3:00</li>
<li>Budget left: €100</li>
</ul>
</td>
</tr>
</table>
OR is there maybe a better way to place these tables? I am open for new suggestions.
A 3 column layout
HTML
<div id="container">
<div class='left third'>
<table>
</table>
</div>
<div class='centre third'>
<table>
</table>
</div>
<div class='right third'>
<table>
</table>
</div>
</div>
CSS
div.third{
width:33%;
}
div.left{
float:left;
}
div.right{
float:right;
}
div.centre{
float:right;
}
/* This will centre the middle table */
div.centre table{
width:#####px
margin: 0 auto;
}
Notes:
1) Width is 33%, not 33.3% to prevent come browsers from wrapping the right column.
2) DO NOT set margins for the columns
3) If possible, use a standard library such as Bootstrap
you can just use margins in css such as:
margin-left:.....
margin-right:....
margin-top:.....
margin-bottom:....
to do it this way you may have to give your td's and th's different id's so you can control them separately
I think you are saying you need three rows/columns in one table whose content is bound to expand.
In header append the stylesheet using
<link rel="stylesheet" href="q1.css" type="text/css">
CODE
<table >
<tr >
<th >Project name</th>
<th>Deadline</th>
<th></th>
</tr>
<tr >
<td>Project 1</td>
<td>24/1/2014</td>
<td><div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div></td>
</tr>
<tr>
<td colspan="5">
<ul>
<li> Your total hours: 3:00</li>
<li>Budget left: €100</li>
</ul>
</td>
</tr>
</table>
css code
table,th,td
{
border : 1px solid black;
border-collapse : collapse;
}
td{
width:10px;
height:10px;
overflow:auto;
}
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
If the table is overlapping other contents in the page then you could you css
clear:both;
The clear property specifies which sides of an element other floating elements are not allowed.
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 an HTML table with 3 columns and amount of text in each column is variable. I would like to set some rules on the layout of the table but Im not sure how to do that in CSS.
Title | Author | Publisher
The default ratio is 50%, 25%, 25% for each column. The goal is to keep everything on a single line if possible. The author and publisher columns have a higher priority to be single lined that the title column.
UPDATE: The problem is when the amount of text exceeds the width of a single line.
You need to change the percentages to defined widths(px). Define the width of the table, as well as give each <TD> it's own width definition that together equal the width of the table. Best way would be to create a CSS class for both, and just assign the class to each element. Something like this, very general obviously.
.table{
width:500px;
}
.tablecell_1{
width:200px;
}
.tablecell_2{
width:200px;
}
.tablecell_3{
width:100px;
}
<table class="table">
<tr>
<td class="tablecell_1">
</td>
<td class="tablecell_2">
</td>
<td class="tablecell_3">
</td>
</tr>
</table>
You can create a class for each of the columns.
<th class="title">Title</th>
<th class="author">Author</th>
<th class="publisher">Publisher</th>
And make css specific for each one.
.title{
}
.author{
}
.publisher{
}
Define a width for the table and then add a class on <td> tags with `width:auto;
.table{
width:900px;
}
.cell{
width:auto;
}
And here your table
<table class="table">
<tr>
<td class="cell">
</td>
<td class="cell">
</td>
<td class="cell">
</td>
</tr>
</table>
Let me now if this is what you wish
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; }