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.
Related
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.
Is there any way to specify the size of a table without changing the size of the cells?
In other words, my table has a border around it and I am using it for a menu:
<table width = "500" height = "300">
<tr>
<td>
Contact
</td>
<td rowspan = "2">
This is the area where news and updates will appear on the right hand side.
</td>
</tr>
<tr>
<td>
Links
</td>
</tr>
</table>
First of all, is there a better way to do this?
If I change the height of the table like that the cells become too spaced out and the menu starts to look awkward.
You shouldn't use tables for layout. Menus in HTML4 should be in an unordered list.
Then you should use CSS to style it however you want.
Why do you use a table layout? Use div elements and style them as you wish in CSS.
You can specify a certain width for the container and width in percentage for its children, so you've only one value to change.
And don't specify height in CSS, only min-height, or you'll block users from zooming at their will.
edit: and inside one of the div, an unordered list for navigation links :)
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 am trying to set up a scrolling table with a maximum height, and to do that I have:
<table>
<tbody style="height: 300px; overflow:auto;">
//php for loop, populating table with <tr>s/<td>s
</tbody>
</table>
This works fine, but if there is only one or two rows they are stretched to fit the 300px height. I switched height to max-height but then the scroll bars never appeared, no matter how large the table got. Where am I going wrong?
I don't know why the tr's and td's are filling the height up when there are few, but you could do a couple things I think.
Try styling the cells to be a certain height, or even don't style anything to a height, and style the div that the table is in to a height. I've done the latter, and it works for me. The cells all stay a normal height, depending on whats in them.
I have following html:
<table>
<tr>
<td class='tclone' id='clone'></td>
<td class='loader' id='loader'>
<div id='tdiv' style="height:630px; width:835px; overflow:auto;"></div>
</td>
</tr>
</table>
I open this HTML in a new window and JavaScript append contents to tclone and tdiv.
tdiv specifically loads a image. I needed to give the width and height parameters to
div as it was overflowing past the window, also overflow parameter allows scroll-bar inside td. This solution works with fixed size window -
but I want a mechanism, such that when user resizes the window the div also gets expanded
and the div scroll-bars are also adjusted to match the new window size.
any suggestions?
You need to specify the width and height in percentage then:
<div id='tdiv' style="height:30%; width:30%; overflow:auto;"></div>
You should adjust the percent values though.
On the table set "table-layout: fixed". Make sure the table and td widths are % based. You shouldn't need a width on the div.
If the content that overflows the div is not contained in another tag, you'll need a wrapper around tdiv.
An alternative to % widths would be setting the min-width and/or max-width attributes.