My issue is that my anchor exceed table cell on iphone 5 display.
I have this as a style for the cell white-space: nowrap;
For the anchor I just have a background color : background: #f88e1e;
Could you advice please ?
<table class="subscriptionTable">
<thead>
<tr>
<th class="feature"></th>
<th class="free">free</th>
<th class="middle">silver</th>
<th class="top">gold</th>
</tr>
</thead>
<tbody>
<tr>
<td class="feature">linktarget</td>
<td></td>
<td></td>
<td><span class="icon-tick"></span></td>
</tr>
<tr>
<td class="feature">linktarget</td>
<td></td>
<td></td>
<td><span class="icon-tick"></span></td>
</tr>
<tr>
<td class="feature"></td>
<td>
</td>
<td></td>
<td>
<a class="someClass" href="somelink">Free trial</a>
</td>
</tr>
</tbody>
</table>
I've succeeded to let the text be on one line by adding white-space: nowrap
But now the anchor width exceed the cell width. The anchor must stay inside...
Whether display:table-cell (CSS) or actual HTML tables, you can't prevent the immediate contents of a table cell from wrapping. They will always expand to fit the content.
If you want to adjust the contents inside a display: table-cell, you'll need to wrap it in another container element and set a different display type (block/table etc).
Related
I'm currently working on a HTML template and Outlook has been a pain in the neck. I have a row with 2 td in which they have separate contents. Is there a supported way to set the height to be equal? Currently I have set a fixed height on the td but if I scale down to mobile version on Outlook. The text would wrap to the next line and cause the height to expand causing the 2 td to have different height.
<table>
<tr>
<td>
<h3>Content............</h3>
<h3>Content.........</h3>
<h3>Content........</h3>
<h3>Content.......</h3>
</td>
<td>
<h3>Content</h3>
<h3>Content</h3>
</td>
</tr>
</table>
From the code above you can see that the first column would have a bigger height compared to the second column. How can I set the height to be equal without defining a specific height for it?. I have tried media queries however it is not supported on Outlook mobile.
Try This.....
<style>
table, th, td {
border: 1px solid black;
height:100px;
width:500px;
text-align:center;
}
</style>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
</tr>
</tfoot>
</table>
I hope you find your answer.
If I understand your issue correct, then the two td's do have same height, you just want to align top content? The height is determined by the highest element in the . Its not possible to do width css and dynamic height. Either you set a fixed, or you let the heights height rull.
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<h3>Content............</h3>
<h3>Content.........</h3>
<h3>Content........</h3>
<h3>Content.......</h3>
</td>
<td valign="top">
<h3>Content</h3>
<h3>Content</h3>
</td>
</tr>
</table>
I managed to get the scrollable table working (table as a whole), but now I want to make it a fixed size and scroll only within the table rows.
Lets say I have a normal table of a width 100.
<table width="100">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
This will work fine, how ever if the value inside of <td> is really long
<td>LongLongLongLongLongLongLongLong</td>
the table width will be increased to accommodate that long <td>
What I am trying to accomplish is to make the <tr> scrollable.
So if the <td> within the <tr> is really long one, the <tr> should become scrollable, instead of increasing the whole table width.
I got some partial solution by making the td scrollable. But I want to make tr scrollable instead of td
<table width="100">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="50">
<div style="width: 50px; overflow: auto">
JanuaryJanuaryJanuaryJanuaryJanuary
</div>
</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Creating a scroll element on an <html> block is pretty simple. try adding the following to the <tr>
(CSS)
tr {
overflow: scroll;
}
to create a better view in your <td> elements you could add:
(CSS)
td {
word-break: break-word;
}
Hope this helps!
I have problem with texts in HTML
This is my code:
<table width="100%">
<tr>
<td align="left"><p style="font-family:arial;font-size:13px;color:white;">10000</p></td>
<td align="center"><p style="font-family:arial;font-size:13px;color:white;">100 </p></td>
<td align="right"><p style="font-family:arial;font-size:13px;color:white;">100 </p></td>
</tr>
</table>
I want it, when I add any character to first TD (align left) it move second and third TD (align center and align right)
Thank for every answer Have nice day :)
Set the width so they don't resize to fit whatever content is in the cells, e.g.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="70%">January</td>
<td width="30%">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
http://www.w3schools.com/tags/att_td_width.asp
align=left/center/right just aligns the content of the cell.
the second and third cells move because the first becomes larger.
if you want fixed table, use width for the cells, so they dont change size.
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/
<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>