<div style="height:100%">
<table style="height:100%" id="parenttable">
<tr>
<td>
<table id="childtable" style="height:100%">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
I am doing dynamic hide/show of the data in child table. So it's height is reduced. But that inturn not reducing the height of parent table. It occurs only in IE
Why you haven't used 2 seperate div's? it would be more better by specifing the css class & relevant javascript.
Related
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 have a table that for various reasons needs to have display block set. My understanding of display block was all elements within the display block element would have their width set to the parent width. My understanding is flawed, can someone explain why the header elements do not fill the width of the table?
<div style="width:500px; background-color:grey">
<table style="display:block; color:white;">
<thead>
<tr style="background-color:orange">
<td>test</td>
<td>test2</td>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td
</tr>
</tbody>
</table>
</div>
jsfiddle
There isnt a answer to this question. I eventually just re-wrote the table and modified the plugin. Thank you to the people which tried helping.
I have a table element on a page here with the first row configured with a colspan=2 and a div inside the row like this below. For some reason the search element is forcing itself to the top of the page and completely outside of the table. I can't seem to track down why this is occuring instead of displaying within the table like it should.
Sample URL: http://tinyurl.com/9rjd2ta
<table width="100%" border="0">
<tbody>
<tr>
<td colspan="2">
<div>my content</div>
</td>
</tr>
<tr><td>other content
i think your code might be like this
<tr colspan="2">
<td >
<div>my content</div>
</td>
<td>other content</td>
Quick-Question: how can this be achieved? (see image below)
Setting td width booth in plain html and with css had no effect.
The td width CAN vary but only with the same width for each row.
Use three separate <table> blocks, each with a single row having three columns of varying widths.
I don't believe it can in one table easily.
Instead, you have to use the colspan attribute to overlap cells on different rows.
For example, use 6 columns, the first row will have colspan = 2 , td, colspan = 2
The second row will have td, td colspan=2, td and so on.
It's quite messy - you might want to consider displaying your data in a different way, for example, using DIVs
It's a lot to look at, but you need a parent table with three rows where each row contains another table with three columns:
<table>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<!-- Set Width of Individual Cells Here -->
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here's a working jsFiddle to illustrate.
take 1 main table with 3 tr and in each tr take another sub table with 3 column than apply css
It's actually possible without this sub-tabling. I'm having this as a bug in my layout now. Just try playing around with paddings and margins inside cells :(
"Bug" works consistently across multiple browsers.
Edit:
Hunted that one.
td { display: block; }
Don't do it at home.
I want to learn what is the best practice to set a table size -the width- so that the contents in the cells will not go out of the table (especially horizontally) but they will be forced to stay in the cells.
Do I need to set width, height on the <table> element level or I should do it both for <tr> and <td> elements?
For example, this table:
<table>
<tr >
<td>
Name
</td>
<td>
Mr.Tuber
</td>
</tr>
<tr >
<td>
Surname
</td>
<td>
Tupova
</td>
</tr>
</table>
The contents of the cell will never go outside the tables as long as you're putting text in the cells.
A good way to build a table like this is to set the overall size of the table, as well as the widths of the columns, using CSS. Let the table expand vertically to accommodate the content automatically.
<table class="table1">
<tr>
<td class="col1">
Name
</td>
<td class="col2">
Mr.Tuber
</td>
</tr>
<tr>
<td>
Surname
</td>
<td>
Tupova
</td>
</tr>
</table>
CSS:
table.table1 {
width:500px
}
table1 .col1 {
width:200px
}
You don't need to specifically set col2, since it will take whatever space if left over. You may wish to also use TH instead of TD for the title cells so you can style those differently than the content cells.
.table1 th { ... }