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>
Related
I am trying to make a HTML email layout using table row, where text and image is being showed in one row. But I am not able to fit in
This is what I want it to look like
My code:
<table>
<tr>
<td class="padding">
<table class="content3">
<tr>
<td>
<p style="padding: 20px; background-color: #f7f7f7;">
Learn how to sync your smartwatch or a fitness band with the Vantage Fit app here.
</p>
</td>
<td>
<img src="images/smart-devices.png" width="150px" style="background-color: #f7f7f7; display: inline;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
By setting a fixed height for each <td> element. The design could be achieved.
I have rearranged the code at codepen: https://codepen.io/samuvpd/pen/gOWbXRx
Looks like the <td> on the right adapts it's size to the width property you set to 150px. You could try setting both <td> at 100% height and then set the <tr> to the size you want.
Technically if you give the parent a size and tell the children to fill 100% of it it should behave as you wanted.
This seems to be caused by the <p> default margin, those 2 <td> are actually the same height but the background color doesn't apply to the margin so it looks smaller.
I would recommend removing that margin and making the <td> have the background color.
td {
background-color: #f7f7f7;
}
<table>
<tr>
<td class="padding">
<table class="content3">
<tr>
<td>
<p style="padding: 20px; ">
Learn how to sync your smartwatch or a fitness band with the
Vantage Fit app here.
</p>
</td>
<td>
<img
src="mages/smart-devices.png"
width="150px"
style="display: inline"
/>
</td>
</tr>
</table>
</td>
</tr>
</table>
I want to add table to my website that will not change height or width when I added a picture. The picture needed to automatic resize to td.
How can I do it?
<table style="width:100%" border="1">
<tr>
<td style="width:34%"><!--Right-->
<table border="1" style="width:100%">
<tr>
<!--Symbol--><td>
<i class="fa fa-arrow-circle-right" style="font-size:72px"></i>
</td>
<!--Name--><td style="text-align:center"><b><font style="font-size:42px">dsfdsfs</font></b><br /><font style="font-size:32px">sdfdsdsf</font></td>
<!--logo--><td>
</td>
</tr>
</table>
</td>
<td style="width:32%" rowspan="8"><!--center-->
</td>
<td style="width:34%"><!--Left-->
<table border="1" style="width:100%">
<tr>
<!--logo--><td></td>
<!--Name--><td style="text-align:center"><img src="images/company/integrity.png" /></td>
<!--Symbol--><td style="text-align:left">
<i class="fa fa-arrow-circle-left" style="font-size:72px; left:0"></i>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use max-width and max-height and set it to size of td or 100%
And I would like to suggest you NOT to write inline styles...
you using the % value to the table. So table are using current resolution i mean of the window in which you opened the page. In order to say for the table to stay in same height you need to use pixels for example:
570px; not 100% or 50% of the viewing screen.
so for the fist line i believe you can simple use the pixel value.
for example:
<table style="width:1200px" border="1">
for the image don't forget to add 100% values for example:
<td style="text-align:center" width="100%" height="100%"><img src="images/company/integrity.png" /></td>
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 HTML table in a <div>:
<div id="ticket_summary" style="height:60px;">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td colspan="2" bgcolor="#666666" align="left"><font color="#FFFFFF"><strong>Summary</strong></font></td>
<td bgcolor="#666666" align="right"><font color="#FFFFFF"><strong><?php echo $result["datetime"]; ?></strong></font></td>
</tr>
<tr>
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
</tr>
<tr>
<td colspan="3"><hr /></td>
</tr>
</table>
</div>
I then have another table below:
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><div id="showticketupdates"><a onclick="show_ticketupdates()"><h3>Show Ticket Updates</h3></a></div>
<div id="hideticketupdates" style="display:none;"><a onclick="hide_ticketupdates()"><h3>Hide Ticket Updates</h3></a></div></td>
</tr>
</table>
the ticket_summary <div> is displaying over the link below. I think it has something to do with the style on the <div> - what can i add to stop it doing this?
Firstly, write this:
<div id="ticket_summary">
in place of:
<div id="ticket_summary" style="height:60px;">
Then, write this:
<td colspan="3"><div style="overflow-y: scroll; height: 60px;"><?php echo nl2br(stripslashes($result["summary"])) ;?></div></td>
in place of:
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
Instead of height, try making it to min-height, so:
<div id="ticket_summary" style="min-height:60px;">
Therefore it will extend when the length of ticket_summary div exceeds 60px.
Also try putting your second table in a div.
EDIT:
If you want to have a fixed height and just show a scroll bar when it exceeds your desired height, then just keep the height and add an overflow: scroll; to your ticker summary div:
<div id="ticket_summary" style="height:60px; overflow:scroll;">
Also, I noticed that you put an hr at the end of the table. But this will not be displayed if there's an overflow so I suggest that you just move the <hr /> at the end of the first table.
See this fiddle: http://jsfiddle.net/AmqRJ/
<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.