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?
Related
My horizontal rule is mixed up with part of the information on a table
So, my issue is to create two separate tables side by side, instead of one table below the other like usual. I did something that made it work but now my <hr> tag is mixed together with the tables.
<h3>Skills</h3>
<table style="float: left">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="float: left">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
That is the code. Can someone please help me put the horizontal rule below the table? As you can see from my code, the hr tag comes after closing the second table tag but my final output has mixed up the horizontal rule together with the table, instead of below it. What error have I made in my code? Any help would be appreciated, especially from my code. Somebody advise me on what's wrong with my code.
Also, I'm not pretty sure what is the work of the div tag since this was kinda an assignment if anybody can explain to me well, and why I put it in my code, I honestly don't know.
table {
float: left
}
hr {
clear: both
}
<h3>Skills</h3>
<table>
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="float: left">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
Change the styles of the <table>s to be displayed as inline:
<h3>Skills</h3>
<table style="display:inline">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="display: inline">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
JSFiddle.
Just an educated guess at this stage you have two
<table style="float: left"> have you tried
<table style="float: right"> for your second table? instead of left? Hope this helps!!
I've found the solution
I just had to put my two tables inside one main table, the two tables would be table data inside table rows
<h3>Skills</h3>
<table cellspacing="10">
<td>
<table cellspacing="10">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
</td>
<td>
<table cellspacing="10">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
</td>
</table>
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 have this html code:
<table border="1" style="width:100%;padding-left:12.4em;" bordercolor="F0C347">
<tbody>
<tr>
<td><b>Assert Name </b></td>
<td><b>Expected</b></td>
<td><b>Actual</b></td>
<td><b>Assert Expression</b></td>
</tr>
<tr>
<td>Name</td>
<td> true</td>
<td> true</td>
<td>assert.equal(true,spy.calledOnce);</td>
</tr>
</tbody></table>
The output looks like this sample.
In the left hand side, I can the see border is taking up white spaces, rather than that it would be great, if the border starts from Assert Name only.
How should I do that?
Note: I want the padding to be present.
Your table has a lot of extra padding. Remove it and it should work.
EDIT:I think you are looking for margin and not padding , please use those words properly.
<table border="1" style="width:100%;margin-left:12.4em;" bordercolor="F0C347" >
<tbody>
<tr>
<td><b>Assert Name </b></td>
<td><b>Expected</b></td>
<td><b>Actual</b></td>
<td><b>Assert Expression</b></td>
</tr>
<tr>
<td>Name</td>
<td> true</td>
<td> true</td>
<td>assert.equal(true,spy.calledOnce);</td>
</tr>
</tbody></table>
Updated Fiddle:http://jsfiddle.net/babtb2uy/6/
Please remove padding-left:12.4em; from inline style : jsFiddle
<table border="1" style="width:100%;" bordercolor="F0C347">
set
padding-left:0em
That's it
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 was trying to put table inside a table like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</tr>
</table>
the reason i want to do this is to set the second table a height
and than overflow:auto so the second table have a scroll bar to scroll down
is that possible , and it it does , how?
You still need a <td>/<th> within a <tr> tag, so add either of those between your <tr> & nested <table> (and probably apply colspan="2")
Also, off the top of my head I'm not sure if the <td>/<th> supports an overflow with scrolling, but if not you can always wrap the nested <table> in a <div> and style it.
<table> isn't valid inside <tr>. Put it inside a <td> inside a <tr> instead.
Like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<td> <!-- ** add this ** -->
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</td> <!-- ** add this ** -->
</tr>
</table>