Iam trying to add html piece of code to an existing html page. I am trying to use a DIV inside TD, then display:inline css attribute for DIV, doesn't work as expected. Any reason why ?
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l">
<div style="display: inline;"> Hello</div>
<div style="display: inline;">
Hiii
</div>
</td>
</tr>
</table>
You have to set width for your table:
table {
width: 100%;
}
http://codepen.io/anon/pen/LKizB
add your display:inline to the td style as well. http://jsfiddle.net/v5Ld3/
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l" style"display: inline">
<div style"display: inline">Hello</div>
<div style"display: inline">Hiii</div>
</td>
</tr>
</table>
Use <span> instead of <div>. Also as others mentioned your table nor td have width defined, so they will use as small width as possible. span is inline anyway and could change that.
If you don't want the whole table being width: 100% you may just set width for the problematic column.
Related
I have a very simple HTML table which has one row and two cells. The first cell has a hyperlink which should cover both cells. How could I get my hyperlink to cover the second td of my table?
Here is my HTML code:
<table>
<tr>
<td style="width:100px;padding:0">
Yes
</td>
<td style="width:30px;padding:5px">Oh yeah</td>
</tr>
</table>
Now my hyperlink only covers the first td, but not the second one. What could be done?
I do not want to use JavaScript. I do not want to copy the link to both table cells.
as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:
HTML:
<div class="table">
<a class="table-row" href="/mylink">
<div class="table-cell">...</div>
<div class="table-cell">...</div>
<div class="table-cell">...</div>
</a>
CSS:
.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }
Here is a working JSFiddle
Personally, I would prefer to put a seperate link in each td that points to the same URL, to keep things simple:
<table>
<tr>
<td>
<a href="http://url/stuff">
First column
</a>
</td>
<td>
<a href="http://url/stuff">
Second column
</a>
</td>
</tr>
</table>
<table style="position: relative">
<tr>
<td style="width:100px;padding:0">
Yes
</td>
<td style="width:30px;padding:5px">Oh yeah</td>
</tr>
</table>
By making the link absolute you pull it out of it's layer and by giving it a width of 100, the link extends to the next TD element.
To prevent the anchor tag from overflowing, give the table a relative position to confine the absolute element to the table width.
Here is a JSFiddle
I have the following example
<table align="right" border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="width: 100%; background-color: red">
test
</div>
If the code is run, the div will enter the floated table. The table will need to be floated so this can't change. Is there a way to stop the other content entering the floated element?
One solution is to give the table an explicit background color.
<table style="background:white; float:right" ...
See new JSFiddle.
The other answers all change other properties such as the relative widths or positions of the div and the table.
Try not to use depreciated HTML tags like align and border. Cellpadding and cellspacing can also be achieved with styles but I'll leave that as an exercise :) This will make the div take up as much space as is needed. If you know the size of the parent div which the table and this div are contained in, just set the width of the table and div to a fixed value.
<table style="float:right; border: 1px solid black;" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="float:left; background-color: red">
test
</div>
http://jsfiddle.net/Shnjt/
use this
<div style="90%; margin-left:auto; margin-right:auto;">
<table style="float:right;width:45%">
</table>
<div style="width:45%;background-color: red; float:left;">
test
</div>
</div>
If you want div and table to be floated you need to set width for both and css: float: left to the div and float: right to the table.
Otherwise you can try removing width:100% from your div and adding display: inline-block.
There is a css property that controls whether an element respect the previous floating element.
Here is the documentation: http://www.w3.org/wiki/CSS/Properties/clear
I do not know what you want to get, but that might help.
# Mr.Lister....
<div style="width: 100%; background-color: red;float:left;">
test
</div>
Float:left; will be helpful to your code.
Good Luck!
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.
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;">