I'm facing problem with table in html,
actually I fixed the width,and want to increase the td height as per the content in it,
for example : if td width is 30px and when data inside td crosses the td width i want to show remaining data in next line and so on..
table:
<table width="100%" border="1" >
<tr>
<td align="left" width="30px">
laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa text
</td>
<td align="left" width="30px">
text
</td>
</tr>
</table>
Here is the solution to your problem! The width of the columns are equal in this case, though they can be changed, not to mention.
<table border="1" width="100%" style="table-layout:fixed">
<tr>
<td style="word-wrap:break-word">Hellohellohellohellohellohellohellohellohellohellohello
<td>text</td>
</tr>
</table>
And here is the demo http://jsbin.com/ihaxob/2/edit ..
I have seen the solution from this thread!
Word-wrap in an HTML table
Related
i just started learning in HTML.
I'm having a problem in cell padding and spacing...
the one that i created have a cell padding and spacing on all row... is it possible to have a cell spacing and padding in the 1st row but not in the 2nd row?
`
</td>
<tr>
<td width="250" height="500">
</td>
<td width="750">
</td>
</tr>
<tr>
<td colspan="2" height="75">
</td>
</tr>
`
You can simply add padding to each TD not TR
But spacing between cells only for the whole TABLE
The Attribute padding is the response about cell padding
<table border="1" style="border-spacing:2px;">
<tr>
<td width="250" height="500" style="padding:5px;">One</td>
<td width="750" style="padding:5px;">Two</td>
</tr>
<tr>
<td colspan="2" height="75">Three</td>
</tr>
</table>
I would suggest to wrap the content you want to edit in a and add css properties like for example:
Take a look at this div and style combination, it gets kinda useful sometimes. You can make the particular elements special even when they are in a table with constant style.
You can even add this style attribute to the / tags themselves. Maybe what you're looking for.
I'm designing a newsletter template and I'm having an issue with a table that contains graphics and text in the same row. For some reason, the graphic pushes the text all the way to the right. I'd like the text to be "connected"/left aligned with the icon as the template uses up to 3 icon sets (icon + text).
https://jsfiddle.net/o1dLoxa8/
The code doesn't look pretty right now as I've been trying everything just to make it work. Anyone able to help me out?
<table border="0" cellpadding="0" cellspacing="0" class="salesListText">
<tr>
<td align="left" valign="middle" class="saleslistIcon">
<img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/billetterL.png" alt="" height="28" width="28" />
</td>
<td align="left" valign="middle" class="saleslistIconText">
Billetter
</td>
</tr>
<tr>
<td valign="baseline" colspan="3">
<h2>Kaptein Sabeltann - Kun forestillingen</h2>
(Kan kombineres med parkbilletter og/eller overnatting)
</td>
</tr>
<tr>
<td valign="baseline">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="salesListSpec">
<tr>
<td valign="baseline" colspan="3">
<h4>Pakken inneholder:</h4>
- Billetter til forestillingen
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="saleslistPrice" colspan="3">
<h2 style="color:#E3178A;"><span>Pris fra </span>240,-</h2>
</td>
</tr>
</table>
.saleslistIcon{padding-right:10px;}
.saleslistIconText{color:#B4B4B4; font-size:12px; padding-right:8px;}
.salesListText{width:100%;}
.salesListSpec{padding-top:10px; line-height:170%; display:block;}
h2 span{font-size:16px; font-weight:normal; color:#444444;}
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right.
Try putting border="1" onto your table definition to see what I mean.
I'd suggest you use the outer table to create your rows and have only a single TD. Inside each TD then embed secondary tables for complicated layout. I'm assuming an email newsletter, so keep your CSS to a minimum or put it inline rather than a separate style section. A lot of email providers don't play nicely with CSS.
Hope that helps.
From the look of your fiddle, this is to be expected. You're using a table layout, meaning that all cells in the same column will have the same width and all cells in the same row will have the same height. My immediate recommendation is to ditch the table layout and use semantic elements.
If you're hellbent on using a table layout, you need to be aware of your colspan and rowspan attributes on your cells and how they affect your layout.
Put display:inline inside <tr> where you have the icon + text.
http://jsfiddle.net/zg0zrx3v/
I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
In my example jsfiddle I have two HTML tables. They are basically the same - same class, same content, everything. The only difference is the order of rows.
<style>
.tbl-lay-fixed {table-layout:fixed}
</style>
<table class="tbl-lay-fixed" border="1" width="100%">
<tr>
<td width="5%">xxxx</td>
<td width="95%">yyyyyyyyyy</td>
</tr>
<tr>
<td colspan="2" width="100%">xxxx</td>
</tr>
</table>
<table class="tbl-lay-fixed" border="1" width="100%">
<tr>
<td colspan="2" width="100%">xxxx</td>
</tr>
<tr>
<td width="5%">xxxx</td>
<td width="95%">yyyyyyyyyy</td>
</tr>
</table>
Table number 1 is displayed correctly - width of the cells is correct.
Table number 2 is displayed incorrectly - second row have two columns with witdh set as 5% and 95% accordingly, but instead it is displayed as 50% 50%.
Where is the problem? It is the same in all browsers.
This seems to work in Firefox at least
(changing bottom TD colspan to 20)
just remove "width="100%" <table class="tbl-lay-fixed" border="1" width="100%"> from the table class
I'm using this boilerplate: http://htmlemailboilerplate.com/
I want a table row to be 6px of height and one row to be 1px of height. No matter what I try the table rows wont go less than a height of 15px. Coincidently 15px is the font-size.
Code:
...
<tr>
<td height="6" style="height: 6px;"> </td>
</tr>
<tr>
<td height="1" style="height: 1px;"><img src="images/bar.gif" width="220" height="1" /></td>
</tr>
...
Any way I can get this table rows to be the height I want?
Did you try using CSS to set line-height:1px on your td?
I dont know if they have changed the rules for Outlook 2013 recently, but I found that setting line height and font size on the TD didnt work. I even tried setting it on the TR, that didnt work either.
I put a & nbsp; in the cell and set its font size to 0px as well as putting line height and font size on the TD just to make doubly sure. That seems to have worked for me.
The example below has a 2px green cell - tested in litmus and "real" 2013. Hope this helps!
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" bgcolor="#0000CC"></td>
</tr>
<tr>
<td height="2" bgcolor="#00FF00" style="line-height:0px; font-size:0px;"><font style="font-size:0px; -webkit-text-size-adjust: none;"> </font></td>
</tr>
<tr>
<td height="20" bgcolor="#0000CC"></td>
</tr>
</table>
I needed to add
table td { mso-line-height-rule: exactly; }
to make it work in Outlook 2013.
Table cells will expand to hold the content you put in them, no matter what height you set them to be.
The non-breaking space will be the height of a line. You need to wrap it like this:
<span style="line-height:1px;font-size:1px;"> </span>
Similarly, the cell with the image will be at least as tall as bar.gif
I use line-height and font-size (if smaller than the current) with a (space) -
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="line-height:5px; font-size:5px;"> </td>
</tr>
</table>
Or if inline -
<span style="line-height:5px; font-size:5px;"><br /><br /></span>