<td style="padding: 8px;">
test
</td>
I'm trying to make a clickable table cell, using display: block on an anchor fills the width of a td, but height is still not filled - the anchor has the height of test text, not the td height with padding.
How can I do this?
Remove padding from td and add padding to
test
try this
<td style="height: 100%;">
test
</td>
set height to td and set padding to a
<table><tr>
<td style="border:thin black solid; background:gray;">
test
</td></tr></table>
Remove padding from td and give it to a tag.
Hope this helps.
Related
I am trying to put a red rectangle icon followed by some text within a HTML Table cell and I am getting very strange behavior here. I am using just a DIV to draw the red rectangle as shown in the example here. I want the height of rectangle to be the height of the cell so I set the height: 100%
https://jsfiddle.net/pm43k26w/1/
<table border="1">
<td>
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
The solution kind of works in Chrome but not in FireFox. FireFox just shows a blank space. It appears it does not like it when I set the height to 100% Can anyone explain why? What's the best way to accomplish this if DIV isn't the right way to go for the rectangle?
Thanks.
Firefox needs content in the div. The following modification will do. The numerical entity is Unicode's 'zero width space character'. A non-breaking space ( ) will do as well, of course.
<div style="width:10px;height:100%;background:red;display:inline-block"></div>
See this fiddle.
Try setting the height of the parent element.
<td style="height:20px">
That should help with the Firefox problem.
Edit: JSFiddle:
https://jsfiddle.net/prove64m/
First of all you forgot the <tr> tag.
So this should be the correct HTML:
<table>
<tr>
<td>
<div></div> first text
</td>
<td>
<div></div> second text
</td>
</tr>
</table>
Then the CSS part:
table {
border:1px solid;
}
td {
height:40px;
}
div {
display:inline-block;
vertical-align:bottom;
width:10px;
height:100%;
background:red
}
Pay attention that the height is ALWAYS evaluated, so, if there isn't any explicitily set, there is nothing "to compute"; we did this here:
td {
height:40px;
}
Other important thing; i guess you would like to control the position of the text after the <div> element; this is possible with online-block elements in this way:
div {
...
vertical-align:bottom;
...
}
Other possible values are: middle, top,...
here the Fiddle: https://jsfiddle.net/pm43k26w/5/
Firstly, you need to understand the problem here. CSS Properties such as height are "Computed". In this particular case, the computed height of the first div (let's call it unseenForce, shall we?) is 0 while its cousin, aptly named seenForce is 10px. See this below :
http://jsfiddle.net/gvo4kf41/
$(document).ready(function() {
$('.Info').html('The computed height of the unseenForce is ' + $('#unseenForce').height() + 'px <br />');
$('.Info').append(document.createTextNode('The computed height of the seenForce is '+ $('#seenForce').height() + 'px'));
});
.Info {
color: red;
margin-top : 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:10px;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
This is because none of the ancestors of the unseenForce have a specific height to them. Hence, Firefox is unable to attach a height to it.
What you need to do it force the Computed value of height to be greater that 0. There are many ways to do it and all the answers here show you different ways of doing it. Choose the one which suits your needs.
Here's the way I would do it. Just add height to the row (<td>).
table td {
height: 10px;
}
<table border="1">
<td>
<div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Height in percentage
</td>
<td>
<div id="seenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
Fixed Height
</td>
</table>
<div class="Info">
</div>
Hope this helps!!!
I have dynamic text content inside all first tds. So the trs and tds get expanded automatically. Now for all second tds there is div with background image and dont have any text inside. I need this divs with background image to be expanded or collapsed automatically along with the cells in table so that the red image will span over the height of each cell. Any way to do this purely with css as I dont want to introduce script here? jsfiddle
<table border="1">
<tr>
<td>
This content makes the trs and tds to expand/contract horizontally automatically
</td>
<td>
<div class="img"></div>
</td>
</tr>
<tr>
<td>
xyz
</td>
<td>
All divs inside second tds should get expanded automatically which is not happening
</td>
</tr>
</table>
CSS
td
{
width:200px
}
.img{
width:30px;
height:40px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAIAAABmo+ONAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVDhPY3gro0IG+v///6hOvGhUJyE0qpMQGtVJCFGmE4jJAf//AwBnlUxAq2HzYQAAAABJRU5ErkJggg==) no-repeat;}
Just set background for that td with 100% width and height.
Fiddle: http://jsfiddle.net/mttSA/
.empty{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAIAAABmo+ONAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVDhPY3gro0IG+v///6hOvGhUJyE0qpMQGtVJCFGmE4jJAf//AwBnlUxAq2HzYQAAAABJRU5ErkJggg==) no-repeat;
background-size: 100% 100%;
}
HTML:
<td class="empty">
</td>
I have a table in which I don't want to set padding &/or margin on each td to apply some spacing between cells, First answer would be to use CellSpacing and/or CellPadding properties of table but when I use these properties they apply space on every side(i.e. on top, bottom, left and right) but I just want to apply space on Top and Bottom.
Is there any solution to my problem?
Use empty row for spacing
See the example below
<table class="style1">
<tr style="height: 20px;">
<td>
sfgefgfeg</td>
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
</tr>
<tr style="height: 5px;" >
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr style="height: 20px;">
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
</tr>
<tr style="height: 20px;">
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
</tr>
</table>
Here the row with height 5px is added for spacing.
You could use border-top and border-bottom on the TD elements and make the colour of the border the same as the background colour of your page.
You can always use padding with <td> to have space on top and bottom in table cell.
To add spacing between rows of table, set <tr> as block element then you can use margin property on that.
Check the demo here http://codepen.io/pen/10248/2
Edits:
Updated to contain spacing between rows.
The alternative ways to create spacing between cells (so that the spacing appears between borders, if cells have borders) is to use cellspacing attribute on a table element in HTML and to use the border-spacing property in CSS. The former suffers from the inflexibility mentioned in the question. The latter has limited browser support. You could use both, so that older browsers use the simple HTML spacing and newer browsers the CSS way.
The following example sets a vertical spacing (i.e., between rows) of 0.5em and a smaller, 0.1em, horizontal spacing (i.e., between columns).
table { border-spacing: 0.1em 0.3em; }
(The order deviates from the usual order in CSS property values: here horizontal comes first, then vertical, whereas e.g. in margin: 0.1em 0.3m an opposite order applies.)
you can simulate spacing by adding border-bottom: 3px solid #fff (change color as you need, same for top)
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 am trying to create a scrollable panel within a table cell.
What I would like is for the div to be as wide as the table cell and then render scrollbars for the content.
When I try the following the div sets its width to 100% of the contained span tag not the cell
<table cellpadding="3" width="90%" align="center" border="0">
<tr>
<td>
<div style="border: solid 1px red; height: 10px; width: 100%; overflow: auto;">
<span style="width: 2000px;">a</span>
</div>
</td>
</tr>
</table>
I was under the impressing that width=100% should size on parent not on child?
Any ideas?
An empty table cell has no width, the span is the one that's forcing the width of the cell. That's why the div width is equal to the cell width.
I tried it within a containing div instead of a table and it works fine.
I assume that the inner span width is causing the td width to be 2000px