I need to wrap text within a <td> element, but I can't use the css table-layout property as the output is to html e-mail body and Outlook doesn't support the table-layout property.
Is there some other way to wrap text within a <td> element, or do I need to do the line breaking and measuring manually in code?
Here is an example of what I am trying to acheive:
td {
border: solid black 1pt;
font-family: arial;
font-size: 10pt
}
thead td{
text-align:center;
font-weight:bold;
}
table {
border-collapse: collapse
}
<html>
<body>
<table style="width:35pt;height:24pt;table-layout:fixed">
<thead>
<tr>
<td style="width:35pt;height:12pt">Good</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt;word-wrap:break-word">Costingly Cost Cost</td>
</tr>
</tbody>
</table>
<div style="height:50pt"></div>
<table style="width:35pt;height:24pt;">
<thead>
<tr>
<td style="width:35pt;height:12pt">Bad</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt" nowrap>Costingly Cost Cost</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the Microsoft proprietary word-break:break-all;
<td style="word-break:break-all;">
That should fix things.
You can try this:
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
Related
My code is this :
<div style="width: 300px;">
<table width="100%" border="2px solid blue">
<tr>
<td style="width:30%">Player</td>
<td style="width:30%">Club</td>
<td style="width:30%">Country</td>
</tr>
<tr>
<td style="width:30%">HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard</td>
<td style="width:30%">Chelsea</td>
<td style="width:30%">Belgium</td>
</tr>
<tr>
<td>Ronaldo</td>
<td>Real Madrid</td>
<td>Portugal</td>
</tr>
<tr>
<td>Messi</td>
<td>Barcelona</td>
<td>Argentina</td>
</tr>
</table>
</div>
The result is this :
I tried to add width=30% in the column player, but it's still not working.
it's beacause your text is too large
use this may help you
<style>
table tr td
{
word-break: break-all;
}
</style>
Moob was before me, use word-wrap:break-word; but also use table-layout:fixed
css code
table{
table-layout: fixed;
}
td {
word-wrap:break-word;
}
That's because "HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard" is stretching it.
Table cells will stretch to fit their content, and if they can't break, they will keep stretching.
If it was "Hazard hazard..." etc with spaces, it would break as expected. The same would happen if you put a large image in the table cell.
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/
I am trying to fix the width no matter of what the content is. But, the width of the table is changing according to it's content. How can I fix it?
Here is my code:
<style>
table{width:25px; background:#66f;}
</style>
<table>
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>
Try this
<table>
<tbody><tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td style="word-break: break-all;">Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</tbody>
</table>
You need to use table-layout: fixed; and provide width to your table and td elements accordingly.
You should also use word-wrap: break-word; so that you don't get in trouble if you encounter a non-breaked string
Demo
you don't mentioned style class table with dot extension and it won't be called using class attribute.
Here is the code:
<style>
.table{
width:25px; background:#66f;
}
</style>
<table class="table">
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>
I'm encountering a problem when styling an dynamic generated table. The user can choose how many columns there have to be, some of them have got a fixed length. How can I let the other give a percentage of the space left, without having to specify the exact width of the columns every time AND without ending up with different column widths with different data/different browsers?
Example:
<style type="text/css">
table{
width:800px;
border:1px solid #CCCCCC;
/* table-layout: fixed; */
}
table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border:1px solid #EEEEEE;
}
table tbody td.active{
text-align:center;
width:100px; /* fixed */
}
table tbody td.option{
width:100px; /* fixed */
}
table tbody td.nonfixed{
width:auto;
}
</style>
<table>
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td>Active</td>
<td colspan="2">Options</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">+ Add new row<td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="nonfixed">[Name 1]</td>
<td class="nonfixed">[Description 1]</td>
<td class="active">[X]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
<tr>
<td class="nonfixed">[Name 2]</td>
<td class="nonfixed">[Description 2]</td>
<td class="active">[0]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
</tbody>
</table>
In the example both "nonfixed" columns should have the exact same width. This should also work when the user adds a nonfixed column or switches the first column with the last etc.
Who's able to help me out?
I see two possible approaches... either use a script to calculate the flexible-width columns' widths and average them, or use nested tables to split the two flex cols at 50%:
<table>
<tr>
<td class="fixed"></td>
<td class="fixed"></td>
<td class="fixed"></td>
<td class="flex-wrapper">
<table width="100%">
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td>4px</td>
<td>4px</td>
<td>4px</td>
</tr>
<tr>
<td colspan="3">content</td>
</tr>
<tr>
<td>4px</td>
<td>4px</td>
<td>4px</td>
</tr>
</table>
I can't set the td's to 4px height using CSS.
Firstly, you cannot define a css class that starts with a number. Your rules dont apply because you set a class of "4px". Please validate.
Secondly, define a font-size so the font doesn't exceed four pixels.
Thirdly, if this isn't tabular data do not use a table for the job. See http://www.hotdesign.com/seybold/
HTML:
<table cellspacing="0" cellpadding="0" width="100%">
<tr class="four-px">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">content</td>
</tr>
<tr class="four-px">
<td></td>
<td></td>
<td></td>
</tr>
</table>
CSS:
table, tr, td { background:#dd0;}
tr.four-px { height:4px; }
tr.four-px td { background:#ff9; font-size:4px; line-height:1; }
Live Demo: http://jsfiddle.net/D9pm9/11/
Live Demo with text inside rows: http://jsfiddle.net/D9pm9/12/
set the row's height.
<td>style="height:4px;"</td>
or...
<table>
<tr>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
</tr>
</table>
/* style sheet */
.smallCell
{
height: 4px;
}
They won't shrink to 4px if you have text or some other element inside them which is too large though.
TD's always expand to accommodate the content. So if your TD is to be 4px, your content inside will have to be 4px or less as well.
Consider TD dimensions as min-width/min-height in concept.
I don't think you can size a row to 4px if there is text in it.
You can, however, resize the text inside the td itself to shrink the cells:
<table>
<tr>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
</tr>
<tr>
<td colspan="3">content</td>
</tr>
<tr>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
</tr>
</table>