I am sorry if this turns out to be a repeated question. I have a Javascript function which creates an HTML table showing information that depends on certain parameters. The table is actually quite large, but the problem I'm having with it is easier to understand (and remains completely unaltered) if I cut the table down to the relevant bit:
<table>
<tr>
<td style="text-align:right">Some text</td>
<td><img src="......."></td>
</tr><tr>
<td colspan="2">Another table (nested)</td>
</tr>
</table>
The problem arises when the sum of the widths of whatever goes in the first row of the table is smaller than the width of the nested table in the second row. In this case it seems that the "excess width" gets equally (or proportionally?) distributed between the two cells of the first row. For purely aesthetic reasons (vertical alignment between image and nested table), however, I want the entire "excess width" to get added to the left-hand cell of the first row. I can't give any particular width to the right-hand cell and use "table-layout:fixed" (which BTW doesn't seem to work correctly in my browser, but that's a separate issue), because the image may have different widths. The cells of the first row don't have any padding, so the image cell should theoretically remain "tight" around the image (which it doesn't), and the right-aligned text of the first cell should touch the image.
I have done quite a lot of experimentation, but with my browser (Chrome) at least I just don't manage to prevent the right-hand cell from getting wider than the image....
EDIT: Thanks for the jsfiddle example. But with this method the table will occupy all the available width, while I'd prefer its width to adjust to the content....
Set the widths this way:
<table>
<tr>
<td style="text-align:right;width:100%;">Some text</td>
<td><img src="......."></td>
</tr><tr>
<td colspan="2">Another table (nested)</td>
</tr>
</table>
Leaving the second <td>'s width without value will make the first cell to expand to maximum possible.
Related
I am working on cleaning up my companies newsletter emails. My issue is that I would like to force my <td> to respect the width that I specify rather than following the widths of the previous <td>. The other issue is that this needs to be very email client compatible.
Here's a jsfiddle of what I'm working on. http://jsfiddle.net/zwf0dL8r/ Sorry about the inline styles, aren't html emails great..
As you can see, the light grey areas are following the width of the first <td> which is holding the cpap.com logo.
Ideally, I wanted to be able to define the widths of <td>s to something new, each time I create a new <tbody>..
You could use CSS to force some behavior, but the browser or email client generally calculate the width of columns automatically based on content, using the widest specified width for the column when the content is shorter. To avoid this you can add the property table-layout: fixed; to the style of the table, but you will have to manually assign the correct widths for each column.
Tables with fixed layout are faster to display but don't resize according to content. The larger content overflows it's cell, causing an ugly looking overlapping data.
Take a look here for e-mail client compatibility: https://www.campaignmonitor.com/css/
Edit.:
To make the bellow cell take the space of the above cells you can add a colspan="numOfColsToTake".
What many people forget is that each <TD> define a column, not only an individual cell. Imagine you are designing it on Excel. If you would do this on Excel, you would have to use the merge cells option for the bellow cell to take the space of the 2 above. The colspan attribute of <TD> elements makes exactly this.
<td colspan="2"><p>Something</p></td>
I have been working on a new document recently that requires the regular use of the <table> function. To fit as many tables into as small and neat a place as possible, I have been using the <div> function. It works well with most browsers, though it regularly causes elements on the document to collide and conflict with each other which is frustrating.
Is there any way to keep tables fixed in their right places, or alternatively a way to set a specified shape for a browser window?
Here is an example of some of the code I have been using:
<div style="float:left">
<table>
<tr>
<th>...</th>
</tr>
</table>
</div>
When including multiple tables and divs, they begin to conflict with each other when the browser window size is changed, this causes, as easily imaginable, lots of aesthetic problems.
Make table wrapper div of fixed width and also for the table too.
The possible reason might be because of fixed div width and overflowing table.
You can check upto where the table extends by giving it border.
float left property affecting table also.
So give,
<div style="float:left">
<table sytle="clear:left;">
<tr>
<th>...</th>
</tr>
</table>
</div>
or else float left to table also
I have a table displaying tabular data in a scalable layout. The table itself has a width:100%.
In one of the columns, user data on rare occasion will include long strings that stretch the table outside of its container.
My solution was to put the contents of that cell inside a div, and give the div a max-width:320px and an overflow:auto. This work in IE9 and FF7, the two browsers I'm concerned about.
<table style="width:100%;">
<tr>
<td>
<div style="max-width:320px; overflow:auto;">
ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
</div>
</td>
</tr>
</table>
However, my preference is not to limit the column's contents to a max-width of 320px. I'd rather that the div stretches as needed with the table, and only overflows when the table no longer fits the screen. Is this possible?
What i have done for this before is set overflow to hidden and put the full string to a alt text so you can see it if you hover. I dont know if thats what your going for but its something i use sometimes.
If not that try looking at useing jquery ui hide effects thats a good looking way to do it. Hope that helps
Why not give the div a max width of 100% and place it around the entire table?
http://jsfiddle.net/wJUyL/
<div style="max-width:100%; overflow:auto;">
<table style="width:100%;">
<tr>
<td>
ReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainerReallyLongUnbrokenStringOfCharactersThatStretchesTheTableBeyondItsContainer
</td>
</tr>
</table>
</div>
I have an HTML table with two columns. For the last row, I want the following to happen:
There will be one cell that spans two columns. (colspan = "2") The width of this cell will not grow past the width of the table. Anytime text in that cell grows too large, I want it to span another row, but not increase the width of the table. The catch is, I want the width of the table to be fitted to be as large as it needs to be to contain the two columns without expanding to another row (excluding the last row).
EDIT: What I have that doesn't work. The problem is that if "really long text" gets too long then it expands the other "text" messages instead of adding new rows.
<table>
<tr><td>text</td><td>text</td></tr>
<tr><td colspan="2">really long text</td></tr>
</table>
You need to style you're TD with "word-wrap: break-word;" and set a max width for the table or TD.
<table><tbody>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td colspan="2" style="max-width:40px; word-wrap: break-word;">really long textsadfadfadfadfadfadsfadfadsfadfadsfasdfasdfasdfasdfasdfasdfasdfasdfa</td>
</tr>
</tbody></table>
This will generate the table like this (without borders), the last rows just increases in height if the text is longer then it fits in width:
on your last row, wrap the content in a div and give it a width, like 100%, this way it wont increase the width of the table but just wrap around.
<td colspan="2">
<div style="width:100%"> The content here</div>
</td>
Since you tagged this question html and css i have to tell you that if you want the content to dynamically create a new row, you will have to use javascript. It's not possible without script, at least not that i know of.
Let's say I have a table of two columns an three rows. Now, In the left column I have content in every row, but in the right one I put a <textarea> element with rowspan="3".
<table>
<tr><td>row one</td><td rowspan="3"><form><textarea></textarea></form></td></tr>
<tr><td>row two</td></tr>
<tr><td>row three</td></tr>
</table>
In most modern browsers you can resize that text area, but I don't need to constrain that. The problem occurs when text area gets bigger vertically and starts to stretch out the table. In Chrome only the last row resizes (desired behavior), while in Firefox all of them expand respectively.
Is there any way to set which rows have fixed height and which ones stretch?
I don't like to say never.. but in this case there is probably not a crossbrowser compatible way using the code you have
Tables are designed to stretch, not to be restricted by heights, and the way that browsers "pass over" a table to calculate cell heights and widths is up to each browser - i.e. there's no hard and fast recommendation - In most of them, on their first pass over the table they're hitting that rowspan and calculating the whole table height from the textarea inside it then dividing the actual rows equally it takes less parsing that way you can imagine if this were a great long table with multiple rowspans the table wouldn't render very quickly if the browser kept having to go back over the table to re-adjust row heights
Anyway, in saying all that the robust cross-browser solution is to not use the rowspan, but to instead nest a table (yuk ;)) inside the first cell which then contains your 3 rows.. or you could simply put three divs inside the first cell to simulate your rows e.g.
<table summary="" cellspacing="0">
<tr>
<td>
<div>row one</div>
<div>row two</div>
<div>row three</div>
</td>
<td><form><textarea></textarea></form></td>
</tr>
</table>
Then style them like your table. Using divs will give you ultimate control over their heights in relation to the textarea