I'm hardly trying to make a DIV container fitting and resizing according to the parent TD and not according to the content of the DIV.
Here's what I want to achieve:
The parent Table should always fit into screen, therefore the width is set to 100%
The left column is fixed size to display the menu
The right column (content) should resize according to browser width
In the content TD, I use the DIV tag for scrolling the content table (overflow auto)
I've expected the DIV to scroll the content (horizontally) and resize its width upon the parent TD. But the DIV extends and the IE scrollbars are used instead of DIV scrollbars.
Here is what I've tried so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="1" width="100%">
<colgroup>
<col width="200px" />
<col width="*" />
</colgroup>
<tr>
<td>
<div style="width:100px;">
Left header
</div>
</td>
<td>
right header
</td>
</tr>
<tr>
<td>
Menu
</td>
<td>
<!-- this DIV should scroll! -->
<div style="overflow:auto; width:100%;">
<table border="1" width="100%">
<tr>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
It might be possible to do so with a layout using DIV tags only. But due to the given master page layout and the asp:GridView, I cannot change that.
Also it should still work with old IE6.
Can somebody help me please?
Update
Could solve the problem myself. If someone is interested, here's the solution:
added the CSS style table-layout:fixed; to the root table.
Shouldn't the width="100%" be on the TD entry instead of the child div and grand-child table?
Like?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="1" width="100%">
<colgroup>
<col width="200px" />
<col width="*" />
</colgroup>
<tr>
<td>
<div style="width:100px;">
Left header
</div>
</td>
<td>
right header
</td>
</tr>
<tr>
<td>
Menu
</td>
<td style="width:100%;>
<!-- this DIV should scroll! -->
<div style="overflow:auto; width:100%;">
<table border="1" width="100%">
<tr>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Related
Can anybody explain the behaviour of the following html page, which is an extract of a legacy application?
My question is: between "My sample text here T1" and "My sample text here T2", the rendering is totally different, and the only difference is that there is a parent table around the second one.
My understanding of html is that table is a block level element that computes its width depending on the content, and I do not understand why there is a such difference in the rendering of this sample.
If anybody knows why and this behaviour can be controlled without forcing the width or using white-space:nowrap, I would be really thankful.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<!-- rendering is correct -->
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T1</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
<!-- Problem is here : addition of a parent table. -->
<table><tr><td>
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T2</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
</td></tr></table>
</body>
</html>
And the rendering :
The answer is that the outer td in T2 does not explicitly know its width and neither table, tr, nor td are block elements. See this fiddle: https://jsfiddle.net/fordareh/u6j64tso/
Basically, you need the outer table to have an explicit width:
<table style="width: 100%"><tr><td>
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T2</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
</td></tr></table>
table shrinks on its content, if nested, inline content might shrink too since parent has no width specified for child to use.
you may remove width style and maybe use a block element so it can receive width, min-width, max-width without interfering with the table layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<!-- rendering is correct -->
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T1</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
<!-- addition of a parent table. -->
<table><tr><td>
<table>
<tbody>
<tr>
<td> </td>
<td>My sample text here T2</td>
<td> </td>
</tr>
</tbody>
</table>
</td></tr></table>
<!-- addition of a parent table. -->
<table><tr><td>
<table>
<tbody>
<tr>
<td> </td>
<td><p>My sample text here T3</p></td>
<td> </td>
</tr>
</tbody>
</table>
</td></tr></table>
</body>
</html>
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 want a table to get the same width as the window and if it´s to wide I want to be able to scroll the table. Today the table gets wider then the window and you have to use the scrollbar on the window instead of the scrollbar on the div that contains the table.
(I have noticed that if I remove the first table it works great, but I can´t remove that because my html-code will be inserted in a page that has this table-tag.)
<table style="width:100%;">
<tr>
<td>
<div style="width:100%;overflow:scroll;">
<table style="width:100%;overflow:hidden;">
<tr>
<td>
<div style="width:900px;">Kolumn123</div>
</td>
<td>
<div style="width:900px;">Kolumn123</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
Here is a JSFiddle demo
The div's width needs to be determined to be smaller than its inner table. Because here it is set to be 100% and everything will be calculated bottom down that makes the scrollbar appear at the outmost container.
If you cannot change the first table, then try to use javascript to get the window's size and set it to the div.
try this--
<div style="overflow: scroll;">
<table>
<tbody>
<tr>
<td>
<div style="width:100%;">
<table style="width:100%;overflow:hidden;">
<tbody><tr>
<td>
<div style="width:900px;">Kolumn123</div>
</td>
<td>
<div style="width:900px;">Kolumn123</div>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I am trying to align 3 tables side-by-side. It doesn't work when I put a table inside another table because the middle table has a lot of content which then makes my first table vertically too big and doesn't look right.
What I am trying to do is make a simple page where I have my first table with 3 rows down. My 2nd table is just a 1 column, 1 row layout for content and my 3rd table is also 1 column and 1 row. I need these tables to be side-by-side.
I have searched the web and cannot find anyone that can do this. When I add the tables they stack on top of each other. Can someone help me with getting my 3 tables to be side-by-side?
<table width="100" border="1">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<table width="100" border="1">
<tr>
<td> </td>
</tr>
</table>
<table width="100" border="1">
<tr>
<td> </td>
</tr>
</table>
If this needs CSS coding can you provide this as well, it would be much appreciated, I'm still learning advanced CSS and HTML.
Add style="float:left;" to each table. eg:
<table width="100" border="1" style="float:left;">
(advanced) CSS:
table{
float:left;
}
If you have to use tables (and you do for things like HTML email), you should be able to accomplish most things with nesting tables. Have you tried using one wrapper table with three cells, then putting your three tables each inside one of the cells from the wrapper table? Dreamweaver is a really good tool for tables. If this is not tabular data, or an HTML email, you should consider a layout not based on tables.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td rowspan="3"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
how about this
Since there has been changes in CSS and Flexbox, etc. There are a couple of ways.
Wrap all the tables in a div.
<div class="main">
<div id="table1">
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
<div id="table2">
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
<div id="table3">
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
Then using a flex display on the main class, and then justify-content as follows:
.main {
width: 1800px; //depending on how wide you want the table window
min-height: 615px; //same as width
margin: 0 auto; //to center the content on your screen
display: flex;
justify-content: space-between;
}
This would separate your tables in one line.
The other option is to use css grid, but won't get into that here. There are a bunch of tutorials online.
Copy the example below and save it as an .html file and run it in your browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<table style="width:100%;height:500px" border="5" >
<tr>
<td>
<br /><br /><br /><br /><br /><br />
<table border=1 style="width:100%;height:100%">
<tr>
<td>
<br />test<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
You will see that the second table overlaps the first table by the amount of line breaks added. Without removing the "height" element on the first table, how can I get the second table to expand to the remaining full height and not overlap the first table.
This is a smaller sample of a larger more complicated HTML scenario
This code works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<table style="width:100%;height:500px" border="5" >
<tr><td height="75px"></td></tr>
<tr>
<td>
<table border=1 style="width:100%;height:100%;">
<tr>
<td>
test
</td>
</tr>
</table>
</td>
</tr>
</table>
Just change the td height to whatever you need. The reason it overlapped was because the inner table was set to 100% height, and the the <br /> didn't affect the height of the outer table and make it expand because it was set to a fixed height.