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.
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'm going crazy, I have my website(http://piscagliacostruzioni.it/) divided by three frames(three rows), in the first one I have a table as menu, it uses around the 30 % of height of the screen.
In this table i put some images, the table is set to 100% to fit the frame and the image are set to fit the cell(only in height, i don't care about width) so what i was expecting was the image to fit in height without overflow, but the result is the image going out of the frame from the bottom and not being displayed.
Here is an example: https://jsfiddle.net/danipisca07/g0dpr0cL/
(I used a div to simulate the frame as parent)
<div style="height : 10%">
<table style="height: 100%; table-layout:fixed">
<tr height="65%">
<img src="http://piscagliacostruzioni.it/scrittariga.jpg" style="height:100%"/>
</tr>
<tr heigth="35%">
<img src="http://piscagliacostruzioni.it/Contatti/contatti.jpg" style="height:100%"/>
</tr>
</table>
Tried to set the table-layout to fixed and the image display property to block but everything was useless.
I hope you will help.
Thanks in advance
Bye
Did you mean something like this: https://jsfiddle.net/g0dpr0cL/2/
Your code is missing <td>
All parent elements (including html and body) needs a height.
html,body{
height:100%
}
Okay, I solved the problem(almost), instead of the first row of the table I used only the image and under it a table with only one row. To understand better see my website: piscagliacostuzioni.it, i've already uploaded the new solution.
Thanks again guys
I think your main issue is that you're missing the <td></td> elements from inside the <tr></tr> elements.
<tr>...</tr> is a table-row.
<td>...</td> is a table-data (the columns inside a row)
So having two rows will ALWAYS wrap the second image onto a second line - that's what the rows are for.
I'm not 100% sure if I understand the layout you're trying to achieve, but try the following code:
<div>
<table width="100%">
<tr>
<td>
<img src="http://piscagliacostruzioni.it/scrittariga.jpg" style="width:100%;"/>
</td>
<td>
<img src="http://piscagliacostruzioni.it/Contatti/contatti.jpg" style="width:100%;"/>
</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.
I am trying to fix a display issue we are having with some tables (nested). In short, we show a page listing products. Each product is displayed in it's own table. And each of these is nested in a larger table to layout the page. Unfortunately, some of the inner tables have slightly more content than others and they end up being different sizes, causing others not to fill the containing cell.
For example:
<table style="height:500px; background:blue;">
<tr>
<td style="vertical-align: top">
<table style="background:red; height: 100%;">
<tr>
<td>hello</td>
</tr>
</table>
</td>
</tr>
</table>
In quirks mode, the red table, fills the blue table, so you basically see a red table, with a blue border.
In standards mode however, the inner table does not expand to fill the blue table. Causing the layout to be not at all as anticipated.
How can I fix this behavior? I don't want to render in quirks, as that will end up creating a maintenance nightmare.
Put style="height: 100%;" on the <td> and <tr> tags. Setting height to 100% needs every parent to have a defined height.
Instead of setting the height of the outer table, set the height of the <td> and style="height: 100%;" on the nested table.
I'm writing some HTML to be inserted into a page. The current structure is something like this:
<table>
<tr>
<td rowspan="2">left column</td>
<td height="1">top row above content</td>
</tr>
<tr><td height="220">my content here</td></tr>
</table>
I have complete control over the table but nothing else. What I want to do is to have a the content fill the entire cell. I have gotten the width, but I can't get the height right.
Some things I have tried are:
Setting the height to 100%.
Attributes like height=200.
Giving the content absolute positioning. This unfortunantly made it fill the page instead of the cell.
The main problem that I haven't solved is because of the left column and content varying in height. When the left column is larger than the content it won't expand. Unfortunantly, fixed height iQsn't an option because it isn't responsive.
How can I make the content fit the the entire table cell?
Have you considered an iframe? seems to me you could set the parameters of the iframe inside a table cell, div, as the iframe usually doesn't care where it is on the page.