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>
Related
I have an alignment issue where the alignment of the background color of the first cell is little more compared to the other cell. I don't know why is it happening.
As in the screen shot the cell which has week has the alignment little higher compared to other cell. Why is this happening ?
How am I supposed to make it aligned properly? Please help me.
I updated your fiddle and added some background colors to it, as you can see in below html fragment.
<td style="text-align: left; padding-left: 10px;background-color: lime" >
<div class="ng-binding" ng-class="{'TODAY': 'todayDate'}[event.dayType]">Fri 1.</div>
</td>
<td colspan="7" style="background-color: red">
<table id="test" style="table-layout: fixed;background-color: aqua">
<tbody>
I've been trying to reset some of those element's CSS value, though they don't kick in, which makes me believe there is other settings somewhere in your CSS files using the same properties, likely with !important.
So, if you check the fiddle you'll see that the recolored td's is different in height and that should narrow down your problem.
Now it would be easier for your to check those settings, alter them some, to see how you can give them the same height.
One observation I made is, if you add a text like this <td colspan="7" style="background-color: red"> Test text <table id="test", you'll see that the red background appear and that background color doesn't have the alignment issue.
Here is one more fiddle update showing that: https://jsfiddle.net/enypgyt3/4/
<p>You should use proper table format like</p>
<p>Table should be proper nested </p>
<p>Table td and tr is not nested properly</p>
<p>Try to comment every table row(tr)</p>
<table border="1" cellspacing="0" cellpadding="5"> <!--table start------->
<tr> <!--tr start-->
<td>
<table>
<tr>
<td>one</td>
<td>Two</td>
<td>Three</td>
<td>four</td>
</tr>
</table> <!--/table inside td open and it should properly closed-->
</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr> <!--/tr end-->
<tr> <!--second row statr-->
<td colspan="4"> <!-- User proper Colspan for every td -->
One-four five six seven
</td>
<td>
Eight
</td>
</tr> <!--second row stard-->
<tr> <!--Third row start-->
<td colspan="5">
One-four five six seven eight
</td>
</tr>
<tr>
<td>One-four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
<p>If possible try comment maximum tr and td </p>
<p>Follow code indentation</p>
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>
In the below code, the table which is supposed to be below the div ends up colliding with it and showing up in the middle of it.
Any help is welcome.
Fiddle here
<div id="header" width="100%">
<center>
blabla
</center>
<table align="left" class="header">
<tbody>
<tr>
<th>Links</th>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
</tbody>
</table>
<table align="right" class="header">
<tbody>
<tr>
<th>contacts</th>
</tr>
<tr>
<td>this guy</td>
</tr>
<tr>
<td>that other guy</td>
</tr>
</tbody>
</table>
</div>
<table>
<tbody>
<tr>
<th>the table that shouldn't be here</th>
<th></th>
</tr>
</tbody>
</table>
You just need to "clear: both" when you don't want an element to be affected by other elements' float value (or align in this case).
Here is what is happening, your first table is attached to the left, your second to the right, and the third is trying to fit between the two.
You can tell the third table to find an empty line to start on by using style="clear: both"
Working fiddle here.
notice the:
style = "clear: both"
on the bottom table
A couple of things:
You're using <center>, which is deprecated, according to
W3C:
The element was introduced in HTML 3.2 - Block elements. It
has been deprecated since HTML 4 - 15.1.2 Alignment.
HTML5 classifies it as a non-conforming feature.
In the jsfiddle you linked, the table seems to be below the div, so
I'm not sure what the problem is. Can you clarify?
I have two iframes, both of which are to the same page. Very little has been done to either, other than one having an onload function set. However, when I put them in the page, only the first one will load. If I switch the order they appear in, the second always fails to show up. Both work perfectly by themselves. Here is the code for the table with the frames in it:
</td>
</tr>
<tr id="gameFrame">
<td>
<iframe id="gameFrame" src="http://en.wikipedia.org/wiki/Special:Random"/>
</td>
<tr>
<tr id="controls">
<td>
<iframe id="goalFinder" onload="getGoal()" src="http://en.wikipedia.org/wiki/Special:Random"/>
</td>
</tr>
</table>
What is causing the second frame not to show up, and how can I fix it?
Simply add a closing tag for each iframe instead of />
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<iframe id="gameFrame" src="http://en.wikipedia.org/wiki/Special:Random"></iframe>
</td>
<tr>
<tr id="controls">
<td>
<iframe id="goalFinder" onload="getGoal()" src="http://en.wikipedia.org/wiki/Special:Random"></iframe>
</td>
</tr>
</table>
Try to close your <iframe>. It's not a self-closing element.
<iframe id="gameFrame" src="http://en.wikipedia.org/wiki/Special:Random"></iframe>
<iframe id="goalFinder" onload="getGoal()" src="http://en.wikipedia.org/wiki/Special:Random"></iframe>
DEMO
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/