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.
Related
I'm laying out a table (yes, for tabular data!) and I'm failing to understand how the widths of the table cells are being determined. For a <table> with 100% width and two empty <td> cells, each cell will take up half the space. Things start changing once different elements are added within the <td>s. However, the children elements of the <td>s all have width of 100%. I would not expect this to change the width of the cells, but it does.
For example, the two cells in the following code have different widths:
<table>
<tbody>
<tr>
<td>
<div>100%</div>
</td>
<td>
<input placeholder="other" type="text" />
</td>
</tr>
</tbody>
</table>
I collected a few other examples in this jsfiddle.
My question(s):
Why is this happening (e.g. why aren't the columns even?)?
Can I maintain evenly sized cells regardless of their contents, even if I don't know how many columns there will be for a given table?
You are letting the browser determine the widths and it will collapse the smaller one to minimum size for the containing elements. If you want to have everything being equal set table-layout: fixed on your table css.
This will divide the columns close to evenly for you.
http://jsfiddle.net/Jqqd9/6/
http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout
In the fixed table layout algorithm, the width of each column is
determined as follows:
A column element with a value other than 'auto' for the 'width' property sets the width for that column.
Otherwise, a cell in the first row with a value other than 'auto'
for the 'width' property determines the width for that column. If
the cell spans more than one column, the width is divided over the
columns.
Any remaining columns equally divide the remaining horizontal table
space (minus borders or cell spacing).
The default is auto which is found in this manner.
Column widths are determined as follows:
Calculate the minimum content width (MCW) of each cell: the
formatted content may span any number of lines but may not overflow
the cell box. If the specified 'width' (W) of the cell is greater
than MCW, W is the minimum cell width. A value of 'auto' means that
MCW is the minimum cell width.
Also, calculate the "maximum" cell width of each cell: formatting
the content without breaking lines other than where explicit line
breaks occur.
For each column, determine a maximum and minimum column width from
the cells that span only that column. The minimum is that required
by the cell with the largest minimum cell width (or the column
'width', whichever is larger). The maximum is that required by the
cell with the largest maximum cell width (or the column 'width',
whichever is larger).
For each cell that spans more than one column, increase the minimum
widths of the columns it spans so that together, they are at least
as wide as the cell. Do the same for the maximum widths. If
possible, widen all spanned columns by approximately the same
amount.
For each column group element with a 'width' other than 'auto',
increase the minimum widths of the columns it spans, so that
together they are at least as wide as the column group's 'width'.
You can simple use the table-layout:fixed CSS property to solve the issue,
here is the solution.
http://jsfiddle.net/hbirjand/HWhp6/
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> and many (34) <td>.
I want to display three variable cells e.g. "name", "hobby1", "hobby2" and then I need to display 31 cells (for each day).
The width of the <table> is limited to about 1000px.
In the day cells always a string of the length 3 shall be displayed or nothing.
My problem is that, the cells never have the same width even if set with css.
The first three columns may be fixed too.
How can I manage my table, that all day <td>s (1-31) have the same width - no matter if the content is nothing or XXX?
http://jsfiddle.net/sBYdu/
A couple of css additions can achieve this.
Use a fixed table-layout
Apply width to your table header not the table cell
Apply word wrapping to the table cells
http://jsfiddle.net/nnePW/
table {
table-layout: fixed;
}
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.
Is there a way for expanding the width of a TD in the table based on the width of the next TD?
The asp:Panel is going to be hidden or displayed based on some condition in the code behind.
I'm thinking it's some CSS thing that would help me fix this, but unable to put a finger on it. Help!
Here's the HTML Markup:
<tr>
<td class="content_body" style="width: 294px">
This is some long text needs to be dynamically wrapped...............................................................
</td>
<td>
<asp:Panel ID="Panel1" runat="server">
This is going to be hidden based on some condition in the Code behind
</asp:Panel>
</td>
</tr>
One thing to try would be to leave the width off of the TD that needs to expand/shrink based on the other TDs. Without a width, a TD will by default take up any available space, so if the other TDs in the row all have a width specified, the one without a width will take up the rest of the space. If there are 2 such TDs, the space will be distributed between them.
With jQuery, you could apply an id to the top td in the two columns and then do something like:
$('#tda').width(($('#tdb').width() > 200) ? 10 : 100)
This sets the width of td with id tda to 10 if td with id b is greater than 200 else it will set it to 100.