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.
Related
Goal: I have tried using the HTML table to create a table that has a scrollable tbody and a fixed first column. Each cell in a given col should have the same width, and the height of any row should be just enough to fit the content, which is what HTML table does.
What I have tried: Finding this particularly difficult to implement, I have instead tried to implement a HTML table with a sticky header and first col, as mentioned here.https://codepen.io/paulobrien/pen/LBrMxa?editors=1100
However, I am noticing that HTML table is giving me problems. I have placed divs that use flexbox to align flex-items within it into td, and the table spacing is no longer working as designed.
I have read that this is due to the fact that HTML table should not have divs with complex styling inside the td and th.
Question: Is it possible for HTML Table to handle divs with flexbox alignment and still render as expected?
Future thoughts: I am considering building a table using CSS Grid, as I heard that is more flexible when it comes to the items it can hold.
<table>
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tr>
<th>Id</th>
<th>Title</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
</tr>
</table>
You can use the colgroup tag and put the col tags in there with specific properties for each column. I put the width property there.
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.
I'm using wicket and have a dynamic table. What I want to be able to do is have a fixed table border height that adds rows (max 5 per page), and it's row's width can grow dynamically so something like:
Column Headers
row1
row2
empty space
end of table
The only solution I can think of (Which probably isn't the best because I'm a novice at both wicket and html) is to have a div with a fixed height, and growable width. The div will provide the table's fixed boxed border, and the table itself will be inside this div, allowing it's rows to grow dynamically by wicket with a pageable view setting a max of 5 rows.
so far I have:
html:
<div class="tableCell">
<table border="1" BORDERCOLOR="#333">
<tr>
<th>SSA ID</th>
<th>Default Qualifier</th>
<th colspan="2">Property Name/Value</th>
<th>Description</th>
</tr>
<div wicket:id="SSAIDs">
<tr>
<td wicket:id="SSAID">test</td>
<td wicket:id="defaultQaulifier">test</td>
<td wicket:id="propertyName">test</td>
<td wicket:id="propertyValue">test</td>
<td class="width" wicket:id="description">test</td>
<td>Edit
 Delete
 View Roles
</td>
</tr>
</div><!-- end SSAID's div -->
and for CSS no matter what I try, I can get the height to be fixed but the width will always expand to the end of the page.. This div is currently inside of a container class..
If you don't know Wicket, that is fine.. I just need to know how to make the div that contains the table wrap its width, but have a fixed height.
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>
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