Having an issue with table CSS where the height of a table nested inside of a TD is not adjusting it's height when a TD in the same TR has it's height overflow (and it must be able to do so).
I have a table layout that looks roughly like this, and there is a min-width property on the TDs:
<table>
<tr>
<td id="TableCellA">Customer Admin User Account</td>
<td>
<table>
<tbody>
<tr>
<td>Content A</td>
<td>Content B</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
A visual example of what happens is here:
I want the borders on the TDs to adjust height when the height of TableCellA changes. Any suggestions on how to achieve that accepted!
Related
I managed to get the scrollable table working (table as a whole), but now I want to make it a fixed size and scroll only within the table rows.
Lets say I have a normal table of a width 100.
<table width="100">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
This will work fine, how ever if the value inside of <td> is really long
<td>LongLongLongLongLongLongLongLong</td>
the table width will be increased to accommodate that long <td>
What I am trying to accomplish is to make the <tr> scrollable.
So if the <td> within the <tr> is really long one, the <tr> should become scrollable, instead of increasing the whole table width.
I got some partial solution by making the td scrollable. But I want to make tr scrollable instead of td
<table width="100">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="50">
<div style="width: 50px; overflow: auto">
JanuaryJanuaryJanuaryJanuaryJanuary
</div>
</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Creating a scroll element on an <html> block is pretty simple. try adding the following to the <tr>
(CSS)
tr {
overflow: scroll;
}
to create a better view in your <td> elements you could add:
(CSS)
td {
word-break: break-word;
}
Hope this helps!
My issue is that my anchor exceed table cell on iphone 5 display.
I have this as a style for the cell white-space: nowrap;
For the anchor I just have a background color : background: #f88e1e;
Could you advice please ?
<table class="subscriptionTable">
<thead>
<tr>
<th class="feature"></th>
<th class="free">free</th>
<th class="middle">silver</th>
<th class="top">gold</th>
</tr>
</thead>
<tbody>
<tr>
<td class="feature">linktarget</td>
<td></td>
<td></td>
<td><span class="icon-tick"></span></td>
</tr>
<tr>
<td class="feature">linktarget</td>
<td></td>
<td></td>
<td><span class="icon-tick"></span></td>
</tr>
<tr>
<td class="feature"></td>
<td>
</td>
<td></td>
<td>
<a class="someClass" href="somelink">Free trial</a>
</td>
</tr>
</tbody>
</table>
I've succeeded to let the text be on one line by adding white-space: nowrap
But now the anchor width exceed the cell width. The anchor must stay inside...
Whether display:table-cell (CSS) or actual HTML tables, you can't prevent the immediate contents of a table cell from wrapping. They will always expand to fit the content.
If you want to adjust the contents inside a display: table-cell, you'll need to wrap it in another container element and set a different display type (block/table etc).
I'm trying to create a table which has fixed width td/th elements within a variable width container div. However the contents of the cells do not overflow as expected. The text should be stay on a single line (white-space: nowrap) and just be cut off.
In the example below the text in the second column, 1st tbody row should be cut off however it isn't. (see jsfiddle).
Html (Css in link above):
<div id="container">
<table>
<thead>
<tr>
<th id="idCol">Id</th>
<th id="descCol"><a>Description</a></th>
<th class="otherCol">Test</th>
<th class="otherCol">Test2</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>Text that should be cut off because this text is extra long</td>
<td>a Column</td>
<td>foo Column </td>
</tr>
</tbody>
</table>
</div>
Or, if you really want your content to not wrap, you should instead add
max-width: 0;
to your td in the CSS.
It seems that although the th has a max-width, the td is allowed to get bigger and overrides it. By giving td a max-width also, your new max-width is the MAX of the two max-width's.
The code below shows a table with a "rowspan" option at the first cell.
Depending on the browser used (ie, firefox and chrome), the ratio of the height of the detail lines differ.
My question: Is there any way to standardize this behavior, whatever it is?
Thanks for the tip.
<table border=1>
<tr>
<td rowspan="3">GroupCell<br><br><br><br><br><br><br></td>
<td style="vertical-align:top;">Detail 1</td>
</tr>
<tr>
<td style="vertical-align: top;">Detail 2</td>
</tr>
<tr>
<td style="vertical-align: top;">Detail 3</td>
</tr>
</table>
Simply adding a fixed height to the td will help to standardize the heights across browsers.
CSS:
td {
height:50px;
vertical-align: top;
}
See Fiddle.
In the following code I need to match the width when shrinking the window :
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
This is just a little example of the page, it would involve more divs and tables.
When I shrink the window the table and the div shrink as need it so the div will shrink more than the table, and that make the page look ugly.
Is there any way to stop the div shrinking when table can't shrink any more?
I tried min-with and it does not work, and I asked already for anything similar but apparently there isn't anything apart of JavaScript.
Could any of you give me a solution other than JavaScript?
Thanks in advance.
Cesar.
I do not have IE7+ to test this, but in Opera it works when you put all the HTML in an outer div block. Than the outer div block is the same with as the table. So at a certain point it does not fit the browser window any more, but now the outer block has its width and in title div keeps the same width as the outer block.
<div style="background-color:red;">
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
</div>
You can use thead and colspan to display the title inside the table:
<table>
<thead><tr style="background-color:blue;"><th colspan="4">The title</th></tr></thead>
<tbody>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</tbody>
</table>
Bonus point : your table structure now makes more sense from an accessibility point of view.
You can also use the caption element, but its formatting may be inadequate :
<table>
<caption style="background-color:blue;">The title</caption>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>