I am not able to find word-wrap in my CSS templates. What could be the reason for there being no word wrap? And how would I go about fixing this?
You can use word-wrap on td elements. I'm guessing you are using software that waits for you to type option and then lets you select from the options.
You can see the working example below, or see this answer for more information. The important part below is table-layout: fixed along with the word-wrap on the td element.
Working Example
td {
border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
I'm developing a website for a company right now. I've done a table and now they say that the td must be also a link. The problem is that one td has three lines and the three lines must be the same link tag. I used a paragraph tag inside the link to change the line height, because they want the three lines with less line space, but it leaves a top space that must be removed. I've tried changing the margin-top, padding-top, td height... Nothing seems to work. If someone can help me I'll appreciate it.
Thank you.
Here's my code:
<table>
<tr>
<th>COMUNITAT</th>
<td>Bé comú</td>
<td>Glocalitat</td>
<td>Cercle</td>
<td>Lideratge</td>
<td>Comunicació</td>
<td>Famílies</td>
</tr>
<tr>
<th>EDUACIÓ</th>
<td>Aprenentatge</td>
<td>Qualitat</td>
<td>Idiomes</td>
<td>Personalització</td>
<td>Llenguatges</td>
<td>Creativitat</td>
</tr>
<tr>
<th>CARÀCTER</th>
<td>Identitat</td>
<td>Espiritualitat</td>
<td>Fet religiós</td>
<td>Equitat</td>
<td>Passió</td>
<td>Rol educador</td>
</tr>
<tr style='border:none !important; vertical-align: top;'>
<th>ENTORN</th>
<td>
<a href="#">
<p>Escola<br/>Universitat<br/>Empresa</p>
</a>
</td>
<td>Oberts</td>
<td>Tecnologia</td>
<td>Arquitectura</td>
<td>Oferta</td>
<td>Transformadors</td>
</tr>
</table>
And here's my actual CSS:
table a p {
font-size: 100%;
text-align: left;
line-height: 1;
}
Edit: This is how it looks currently.
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 problem that appears to only occur in Chrome and nowhere else. I have a table, which has a style applied to it on hover. In other browsers, the style is applied when hovering over any part of the row. However, in chrome, at the edge of each td, the style is no longer applied. If I "inspect element" on this small 1px wide area between cells, the elements pane shows that Chrome thinks I am within the table, but not within the row itself. Here is some code which produces this effect:
CSS:
table.tablesorter tbody tr:hover {
background: #8dbdd8;
cursor: pointer;
}
table {
border-collapse: collapse;
border-spacing: 0px;
border: none;
}
HTML:
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bach</td>
<td>42526</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Doe</td>
<td>243155</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>Conway</td>
<td>35263</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
</tbody>
</table>
Anybody seen this before / know a way around it?
If it helps, I am using Chrome 13.0.782.220.
Live demo: http://jsfiddle.net/yNPtU/
Interestingly this is not caused by the border. If you set a border width to 10px, there is still only 1px in-between the cells that causes this.
I tried setting the position of the tds which seemed to work. Here is a demo: http://jsfiddle.net/lnrb0b/6harr/
Note: I've added the padding in to keep the size consistent
As mentioned in this question, this will solve it:
td {
padding: 2px 5px;
position:relative;
}
And the JsFiddle.
The table has cellpadding and cellspacing by default. You will need to add:
<table cellspacing="0" cellpadding="0">
Give border-spacing:-1px in css.
I use Drupal 6 with theme summertime. Also I use FCKeditor. In order to align content I wanted to create a table with invisible borders. First I tried FCKEditor table properties and I gave 0 to border size in order to make borders invisible. But it did not work. I looked up the source and non working code was like below (Why giving border="0" did not work?) :
<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
<tr>
<td>
<h2 class="rtecenter"><strong>Content </strong></h2>
</td>
<td><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
</tr>
</tbody>
</table>
Then I tried:
<table width="468" cellspacing="0" cellpadding="0" style="border: medium hidden ; width: 468px; height: 201px;">
Table borders are now invisible but cell borders are still visible. How can I make it totally invisible. Thanks.
The border attribute should be specified on the cell level, eg <td style="border: 0;">. Of course, this should be made in CSS using:
table td { border: 0; }
But I see that in your case that might be difficult.
It should be done like this:
<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
<tr>
<td style="border: 0">
<h2 class="rtecenter"><strong>Content </strong></h2>
</td>
<td style="border: 0"><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
</tr>
</tbody>
There are probably borders set in the CSS. Drupal core's system.css sets some borders on table headers and body that can be a pain to override.
You can add a custom CSS file to the theme so you avoid editing its CSS directly. Simply add the path to your added .css file in the theme's .info file.
Then try adding:
tbody,
thead,
thead th,
tr.even,
tr.odd {
border: 0;
}
Don't forget to turn off CSS aggregation and clear your cache.
I just happened upon this while searching for something else. This is old, but thought I'd comment anyway. Someone else might find it helpful.
Rather than do a few of the things mentioned above, it would be simpler to just add a specific ID or CLASS name to the table itself, then you could specify settings just for that table in the CSS.
HTML:
<table .... id="exampleclass">
CSS:
#exampleclass tbody,
#exampleclass thead,
#exampleclass th {
border: 0;
}