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.
Related
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 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 have a table who's columns contain two inline divs, one displaying an image, and the other display text, side by side. So each td is rectangular with an image on the right and text beside it on the left (on a single line). The problem (which happens in all browsers) is when I shrink the horizontal browser size, rather than keeping the td width fixed and adding a horizontal scroll bar, it is wrapping the text and moving it under the image, hence shrinking the width of the td. How can I get the td widths to stay fixed regardless of the browser width? Oh and in case its affecting it, both divs have relative positioning so that I can slightly adjust their position within the td. Also, I can't fix the width of the td since each column width must slightly vary depending on the text. Thanks
<td>
<div style="display:inline;position:relative;">
<img src="some_image.jpg" />
</div>
<div style="display:inline;position:relative;">
some short text
</div>
</td>
You can add the 'nowrap' attribute to the td:
<td nowrap>
or style it with:
td {white-space:nowrap;}
Basically your problem is right there in the question "How can I get the td widths to stay fixed ... Also, I can't fix the width of the td since ..." :)
Anyways, there are two possible solutions that I can think of.
If you know what maximum width of the table you want to allow, you could wrap it in a div with a fixed width. That way the body of your page won't shrink to less of the width of the wrapping div, and therefore it will not push on your table.
Use javascript to fix the width of the td after the page has loaded. That way it will be fixed to whatever width its contents have expanded it to.
You should be able to get the width from the td from the offsetWidth property.
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.
Please consider the following:
<td style="width: 500px;">
<div style="width: 400px;">SomeContent</div>
</td>
For some reason, the column that contains a div will not expand to 500px as the style suggests.
Do you know how to get the td to honor the width that I am specifying in the style?
In theory, you can use the min-width and max-width styles. In practice, some popular browsers ignore these styles. In this case you have explicitly declared a width of 400, so it should always equal 400 unless acted upon by a child growing or a parent shrinking. You could runat-"server" and programatically determine the width attribute based on content size, or you could play with the overflow style, or put it in a Panel with a horizontal scrollbar.
is there a width on the table and other tds within the table? Also, have you got a doc type going on?
However, that said, here's your solution:
<td style="width: 500px">
<div style="padding: 0 50px">SomeContent</div>
</td>
Setting your padding appropriately.
Having reread your question, I feel that this might not be the answer you're looking for. Could you elaborate a little more?
try this:
<td style="width:500px;">
<div style="width:100%;">SomeContent</div>
</td>
if however you want the td to be the exact size of the div, to a MAX of 500px, then try:
<td style="max-width:500px;">
<div style="width:100%;">SomeContent</div>
</td>
Keeping in mind that IE6 doesn't understand max-width, and will just force it to be 500px.
You have no reason to set a fixed width on the DIV within the TD, by default DIV's are block elements which means they will fill the full width of there containing element.
Either set padding on the TD or margin on the DIV to achieve the same style.
Without seeing futher markup or css i can't see any reason why the TD would not be 500px, if you added two different background colors to the elements you will indeed noticed that the TD will be 100px wider than the div.