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.
Related
I have this table:
<table>
<tr>
<td>
<div style="height: 100%">Some Content</div>
</td>
<td>
Some Content<br><br><br><br>
</td>
</tr>
</table>
<div> height should be 100% inside <td>, but height of <td> is not specified.
There should be some simple solution.
JS FIDDLE EXAMPLE
You can use:
<td style="vertical-align:top;">Top</td>
<td style="vertical-align:middle;">Middle</td>
<td style="vertical-align:bottom;">Bottom</td>
<td style="vertical-align:54%;">Custom</td>
// More information on: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
On the table cell to position the content correctly. You still however get background coloring issues where you probably want to apply any color directly to the table cell like so:
<td style="background-color:yellow;"></td>
Information on table row heights:
The height of a 'table-row' element's box is calculated once the user
agent has all the cells in the row available: it is the maximum of the
row's computed 'height', the computed 'height' of each cell in the
row, and the minimum height (MIN) required by the cells. A 'height'
value of 'auto' for a 'table-row' means the row height used for layout
is MIN. MIN depends on cell box heights and cell box alignment (much
like the calculation of a line box height). CSS 2.1 does not define
how the height of table cells and table rows is calculated when their
height is specified using percentage values. CSS 2.1 does not define
the meaning of 'height' on row groups. Source W3.org
I have done inline css remember to always separate css using style sheets.
It seems that the div height is restricted to the cell's height, we can manipulate the cell height in pixels. 100% will only ever give you 100% of a cells min-height so you'll have to define it in pixels or some of form of dimension up to you.
How do to remove Auto Resize of Table cell? When I enter a text that would exceed the width of a table cell it automatically increases its width. Is there a way to disable its auto resize?
I'm directly adding text in table cell without any other element than <td>,
<td>Text is Here...</td>
Is there an element when the text exceeds the <td>'s width it will auto end line the next word. is that possible? I tried <p> and it doesn't work for me.
This is a sample:
http://jsfiddle.net/88RtG/2/
I want the first cell to have same width all the others regardless of its contents.
Browsers apparently expand a cell no matter what (even table-layout: fixed does not help), if the cell contains a string of characters that cannot be broken by the rules that the browser is applying.
If a string like “asdasdasdasdasdasddasdasdadasd” has no permissible breaking points, then it seems that the only way is to wrap the cell content in an element, say <td><div class=cell>...</div></td> and set a width on that inner element. You would then have to deal with the overflow issue (should the excess content flow into the next cell, or be hidden, or what?).
If it has permissible breaking points, mark them, using <wbr> or (More info on this: http://www.cs.tut.fi/~jkorpela/html/nobr.html#suggest ) for simple line break opportunities, for hyphenation points.
Specify the width to the table, row or the cell.
Try:
<td width="80px">Text is Here...</td>
Alter the width on all the cells of the ones you want - only need to do it on the first row. You can use percentages as well.
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 <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 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.