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/
Related
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'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
I want a background for a td. Here is my code:
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr colspan="2">
<td>
<img src="Images/1.png" width="567" height="108" />
</td>
</tr>
<tr colspan="2" >
<td style="background-image:url(Images/2.png); background-repeat:no-repeat;">
</td>
</tr>
</table>
The problem is that no images are displayed in the second row.
If I use:
<img src="Images/2.png" width="567" height="108" />
then the image 2.png does display.
Why isn't my first image appearing?
The cell has no content, so it has no height, and there are no other cells in the row to give it a height, so there is no space to display a background image in.
Try putting some content inside the the td. Ex:
<td style="background-image:url(Images/2.png); background-repeat:no-repeat;">
<p>Hi, I am some content.</p>
</td>
If that resolves, then you'll know that the problem is that no background appears when an element has no dimensions.
<table width="100%" border="0">
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="120">Banner Image</td>
</tr>
<tr>
<td width="400" colspan="80"></td>
<td width="10" colspan="2" bgcolor="yellow"></td>
<td width="190" colspan="38"></td>
</tr>
</table>
</table>
The alignment is messed up for the 2nd row. How can it be resolved?
Looks like there are a lot of issues here.
First off, this isn't valid html. The second table tag can't go where you have it. You need to do something like:
<table width="100%" border="0">
<tr><td>
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</table>
</td></tr>
</table>
Which will probably solve your immediate problem. However, why on earth do you have 120 columns? That seems wrong by any standard.
Note I removed the colspan because it's use here seemed very inappropriate.
Also, you might ask yourself why you have the outer table tag anyway. It's not exactly doing anything for you that can't be done in a better manner.
Colspan is used to indicate how many COLumns a single column SPANs, not to indicate a pixel width, as it would appear that you are trying to do here.
Instead, use colspan to indicate how many columns a single column should span, and indicate the width of columns either using css styles or the "width" atttribute.
See this example:
http://jsfiddle.net/xixionia/yt3gf/
The second table should be better if you placed it inside a td on the first table. Then on the second table there's a lot of colspan.
<div>
<table>
<tbody>
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</tbody>
</table>
</div>
I do prefer to use div in place of table. But you still have a choice. As you can refer to the other post.
You would try:
<table width="100%" >
<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="120">Banner Image</td>
</tr>
<tr>
<td style="width:400px;" colspan="80">a</td>
<td style="width:10px;" colspan="2" bgcolor="yellow">b</td>
<td style="width:190px;" colspan="38">c</td> </tr>
</table>
</table>
I add "border=1" and text in the cells in order to see the changes.
You got a table inside a table directly and thats not "valid".
Considering:
I want the banner to stretch across the table. The second row should be in proportion of width 400, 10 for the separator and 190
You should have:
<table style="width:100%; background-color: #fff;">
<tr>
<td colspan="3">Banner Image</td>
</tr>
<tr>
<td style="width: 66.6%"></td>
<td style="width: 1.6%; background-color: yellow;"></td>
<td style="width: 31.6%"></td>
</tr>
</table>
You are clearly trying to use tables to make layout wireframes. You should research more about CSS and html5.
This answer will probably fix your code but not the logic you are trying to apply.