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 :)
Related
So, I have a unique case where I'm using xslt to generate many (~50-100) div elements depending on the day from an xml like this:
<div class="allApps" >
Content here
</div>
<div class="allApps" >
Content Here also
</div>
...
I currently have them formatted into rounded boxes stacked vertically. How can I use css to position them into a "tabular" format, like fitting 5 in a row?
Alternatively, they were initially <li> instead of <div>. How could I implement tables with <li>?
The reason I'm doing this is to reduce the amount of scrolling required to get to the bottom of the elements.
Thanks!
If you goal is to reduce the vertical scroll then try to make some of them as
display:inline-block
You could make them all inline-block and then insert breaks every so often (like every 5th one). Or, if you want some great responsive options you could use Bootstrap.
If you are really set on using a table then li's have nothing to do with it. Li elements are for a list, not a table. Cells in a table use td like
<table>
<tr>
<td></td>
</tr>
</table>
But honestly, the easiest thing is probably to just switch to css display:inline-block.
I'm using ajaxcrud.com and there's a function that allow me to format my field. It do so by including a <span> just before my text. Something like:
<table>
<td><span>Text here</span></td>
</table>
My problem is that my cells width are all the same. So if I have a lot of text in a cell, it only make a cell with a huge height.
Is there anyway I can use this <span> to expand my cell width?
Set the display of the <span> element to either block or inline-block. Then you can set a width rule for the span that the table cell will respect. You can set this to a specific pixel width, a percentage, etc.
Here's a solution suggested by Explosion Pills:
<table>
<td><span style='display:block; width:400px;'>Text here</span></td>
</table>
Of course, you can adjust the width to your needs.
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 a <span> element inside a <td> cell. I'm trying to figure out what CSS rules to use to force the <span> content to wrap to a new line instead of causing the <td> item to expand.
Sample code:
<html>
<body>
<table>
<tr>
<td>
<p>This should set cell width</p>
<span>This longer line should wrap at the length of the above
<p> element width.</span>
</td>
</tr>
</table>
</body>
</html>
The problem is that the table width isn't 100% of it's parent container. I don't want to force the table to a certain size, I just want to exclude this particular content from being included in the table's size calculations.
Is this possible? If so, how?
I'm pretty sure you can't do so only with CSS. As you mentioned it can be done by JS. Try have a look at my quick example: http://jsfiddle.net/a9dhC/
Is it what you expected?
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.