The content of a row is higher than the row itself. Is there a way to truncate?
I tried this:
<table>
<tbody>
<tr style="height:100px;overflow:hidden">
<td>
<div style="height:400px; width:100px; background: yellow;"></div>
</td>
</tr>
</tbody>
</table>
but it did not work.
Set the table row to display: block
<table>
<tbody>
<tr style="height:100px;overflow:hidden;display:block">
<td>
<div style="height:400px; width:100px; background: yellow;"></div>
</td>
</tr>
</tbody>
</table>
EDIT
If you want the table row to still act like a table row (display: block changes the row rendering) you should use nested DIV elements inside of the table cell instead:
<table style="border: solid blue 3px">
<tbody>
<tr>
<td>
<div style="height:100px;overflow:hidden;border: solid black 3px;">
<div style="height:400px; width:100px; background: yellow;"></div>
</div>
</td>
</tr>
</tbody>
</table>
Code with preview here: http://jsfiddle.net/pYzRu/
Related
I need to create table where first row will have changeable height and second row will be fixed height.
As you can see in code I have few tables one in other, thing that I need is that first row of table with id table, have changeable height and to get scroller when window size is to small to see entire content, and second row of this table(row with button) need to be visible always. In Chrome I have wanted behavior but in Firefox and IE I don't and I need to have it in all browsers.
<style>
body{
overflow:hidden;
}
</style>
<div class="pane" style="height:100%">
<table id="table" style="height:100%; width:100%;" cellspacing="0" cellpadding="0">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow:auto; height:100%; width:100%">
<div class="pane">
<table >
<tr >
<td >
<table>
<tr><td>aa</td><td>aa</td></tr>
<tr><td>bb</td><td>bb</td></tr>
<tr><td>cc</td><td>cc</td></tr>
</table>
</td>
</tr>
<tr >
<td>
<table>
<tr><td>aa1</td><td>aa2</td></tr>
<tr><td>bb1</td><td>bb2</td></tr>
<tr><td>cc1</td><td>cc2</td></tr>
<tr><td>aa11</td><td>aa22</td></tr>
<tr><td>bb11</td><td>bb22</td></tr>
<tr><td>cc11</td><td>cc22</td></tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="button" value="dugme"/>
</td>
</tr>
</table>
</div>
I have to respect this table structure. Any advice would be great.
I have a very simple problem: I need to center a table inside a TD element. If I were using HTML 4 I'd do it like this:
<table style="border:solid;width: 100%">
<tr>
<td align="center">
<table style="border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But I'm trying not to use deprecated attributes and do it the CSS way. I already tried this:
<td style="text-align:center">
And this:
<td style="margin: 0 auto">
And the tables keeps in the left-side of the cell. Any suggestions?
You had the right idea with margin:auto 0; just take off the 0.
Working example: http://jsfiddle.net/cxnR8/
<table style="border:solid;width: 100%">
<tr>
<td>
<table style="margin:auto;border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But, more importantly, do you really need to use tables and in-line styling?
Center the table using the deprecated align="" attribute.
<table>
<tr>
<td>
<table align="center">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
Your seccond suggestion is correct. See this working example.
HTML:
<table class="outer">
<tr>
<td>
<table class="inner">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
.outer
{
width: 100%;
border: solid 1px red;
}
.inner
{
width: 25%;
margin: auto;
border: solid 1px blue;
}
I am currently working on a web application in HTML5, where I have a table with two columns I want the first column width to be auto size so it's fit the content inside the column and the second column width to fill all the spare space
I tried the following:
<table style="width: 100%;">
<tr>
<td style="display: inline-block">
<div id="list">
<table>
...
</table>
</div>
</td>
<td style="width: 100%;">
<div id="canvas">
</div>
</td>
</tr>
But the second column always takes more width space than it should which cause the first column table rows to be multiline instead of one line.
Any idea?
Thanks
The first column's contents become multi-line because the only auto-size mode available is one that tries to shrink the column as much as possible. If you don't want the contents to wrap, specify this explicitly using white-space: nowrap.
.t1, .t2 { border-collapse: collapse; }
.t1 > tbody > tr > td { border: 1px solid red; }
.t2 > tbody > tr > td { border: 1px solid blue; }
.t3 td { white-space: nowrap; }
Example 1:
<table style="width: 100%;" class=t1>
<tr>
<td>
<div id="list">
<table class=t2>
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
</table>
</div>
</td>
<td style="width: 100%;">
<div id="canvas">
</div>
</td>
</tr>
</table>
<br>
Example 2:
<table style="width: 100%;" class=t1>
<tr>
<td>
<div id="list">
<table class="t2 t3">
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
</table>
</div>
</td>
<td style="width: 100%;">
<div id="canvas">
</div>
</td>
</tr>
</table>
No need to use JavaScript, and no need to set the right-hand cell to a specific width tailored for specific left-hand cell content.
The solution is pretty simple thanks to Iaasch suggestion to use jQuery
$(document).ready(function() {
$('#left').css('width', $('#places-table').width());
});
<table style="width: 100%;">
<tr>
<td id="left">
<div id="list">
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</div>
</td>
<td style="width: auto;">
<div id="canvas">
</div>
</td>
</tr>
</table>
When you set a td to width:100%;, it means 100% of the tr. So, it will be the entire row. Try making the right td like width:75%;.
jQuery is your friend.
<table style="width: 100%;">
<tr>
<td id="left" style="display: inline-block; width: 100%;">
<div id="list">
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</div>
</td>
<td style="width: auto;">
<div id="canvas">
</div>
</td>
</tr>
</table>
and where you have your scripts add this:
$(document).ready(function() {
$('#left').css('width', $('#list').text().length * 7);
})
I have some nested tables. There is the main, outer table, it has to nested tables for the left and right columns, and in each column some tables are stacked on top of each other. What I can't seem to figure out is how to get the tables in the column to all span the same width (mostly in the right column). Here is the HTML, scaled down for readability:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2" style="margin-top:20px; margin-left:86px">
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<tr>
<td>
<table class="cell" id="t3">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t4">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t5">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t6">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t7">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t8">
</table>
</td>
</tr>
<tr>
<td>
<table class="messages" id="t9">
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And here is the relevant CSS:
.outer
{
margin: auto;
}
.column
{
border: none;
margin-left: auto;
margin-right: auto;
}
table.cell
{
border-collapse: collapse;
}
#rightColumn table
{
padding: 10px;
width: 100%;
}
Any advice is appreciated.
If you really want to nail down table column widths, use the table-layout: fixed CSS property on the table and specify widths for all of the cells in the first row (or use col elements if you're starting with no first row).
So the CSS I had was valid. Firefox had actually cached an older CSS for this page. The widths went to 100% as soon as I cleared the cache.
Can someone tell me how to create a scrollbar for the inner table? The inner table is not displayed within the container. I colored the background of the container yellow. The table itself is blue.
I wanna see a scroll bar within the table.
Source:
http://nopaste.info/e51385254e.html
and here:
<html>
<body>
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<body>
</html>
wrap your inner table with a div. Make that div scrollable by giving it the width and height styles with overflow as auto or scroll.
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<div style="max-height: 100px; max-width: 100px; width: 100px; overflow: auto;">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
that should work
Try this on div part
<div style="overflow:scroll width:1000px;margin-left:auto;margin-right:auto;
background-color: yellow; height: 1000px;">
If fail, try overflow:scroll on the style of the table.
Wrap your table with a div, which will have the same width with your container and overflow:scroll
Example: http://jsbin.com/uheha4