This is a continuation of previously posted question: Center a table and align right a div. On this previous question, j08691 provided a perfect solution to center a table and right align a div. But now I've encontered problem with the pageDiv and PageLinks elements overlay each other if I put them in a outer table. See this for example: http://jsfiddle.net/hockchailim/uECFg/4/. Is there a way to auto expand the outer table to prevent such overlay?
<table id="outerTable" border="1">
<tbody>
<tr>
<td>
<div id="pagingDiv" style="width:100%;">
<div id="goToPage" style="float:right"> Page 3 of 42 | Page#:
<input style="height:14px;width:21px;" /> GO
</div>
<table id="pageLinks" style="margin:auto;">
<tbody>
<tr>
<td> 1
</td>
<td> 2
</td>
<td> 3
</td>
<td> 4
</td>
<td> 5
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
This is too short, <br/>
it caused goToPage and pageLinks <br/>
on previous cell is overlaying each other
</td>
</tr>
</tbody>
</table>
Is this what you're after? I removed the positioning from the Div's
#pagingDiv {
}
#goToPage {
right:0;
}
http://jsfiddle.net/uECFg/6/
Does this do it for you? I removed some styling
#goToPage {
position:relative;
margin-left:0;
margin-right:0;
float:right;
}
http://jsfiddle.net/uECFg/9/[][1]
[1]: http://jsfiddle.net/uECFg/9/ <------ UPDATE
Related
So I am creating tables on a page dynamically, and the rows in each table are also dynamic. I want to display them all in one line and make them scroll horizontally if there is an overflow instead of wrapping. I set inline and overflow scroll:
.tableDiv {width:100%; overflow:scroll; display:inline}
but they are still wrapping. Any help on this would be greatly appreciated!
Here is the jsfiddle: http://jsfiddle.net/xAxfr/
http://jsfiddle.net/xAxfr/2/
.tableDiv {
width:100%;
overflow:auto;
white-space:nowrap;
}
.table {
border-collapse:collapse;
border-spacing:0;
display:inline-block;
}
white-space:nowrap; and display:inline-block;
Remove float: left on .table and add white-space: nowrap on .tableDiv.
http://jsfiddle.net/xAxfr/1/
I think that you could use "The Table Method" as described here. If you next the tables in another table instead of a div, you can make the row as wide as you want creating the same effect.
ex.
<table class="tableContainer">
<tr>
<td>
<table class="table">
<tr>
<th colspan="2">
Table One
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>
<td>
<table class="table">
<tr>
<th colspan="2">
Table Two
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>
I am trying to align a table. The table needs to be centered horizontally, and to vertically maintain the same margin from the top.
When I use the following CSS, it would center the table horizontally, but ignore the top:50px.
Then I used position:absolute; on CSS, then it would read left:50px; but would not center horizontally.
How can I achieve this? I am trying to stay away from DIV, but if it is the only way, I will use it.
<body>
<table border="1" id="mainTable">
<tr>
<td width="150px" height="100"> </td>
<td width="700px"> </td>
<td width="150px"> </td>
</tr>
<tr>
<td height="800"> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td height="100"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
#mainTable{
width:1000px;
top:50px;
margin-left:auto;
margin-right:auto;
}
you just add text-align:center in td tag,
#mainTable tr td{
text-align:center;
}
Check this Fiddle Demo
Just solved. I used position:relative; instead of position:absolute; And it worked.
Thank you everybody.
#mainTable tr td{vertical-align:middle;}
I have html tables inside a huge table that I'm trying to get to to lay their cells horizontally dynamically generated by php. Right now my structure looks like this:
<table>
<tr>
<td>
<table>
<tr>
<td>
1
</td>
</tr>
</table>
<table>
<tr>
<td>
2
</td>
</tr>
</table>
</td>
</tr>
</table>
and the html my chrome browser is rendering outputs the cells like this:
1
2
instead of:
1 2
I know I can just as easily do this:
<table>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
and have my desired output of:
1 2
but I have some info that won't fit clean in a td cell in a table. Any help?
If you use "float: left" and put some text after the table, it positions next to the table, not in the bottom.
Use
td table {
float: left;
/*or:
display: inline-block;*/
}
Use float:left for table CSS
table{
float:left;
}
Fiddle here
I have problem with absolute positioning DIV over the table element. I have a DIV that’s set the position absolute and set the top position to display the exact place. Now what happened in chrome browser while zooming (ctrl +) the DIV position has been changed at zoom level 125, 150, 175 ... etc. But Zoom level 100,200, 300… (Multiple of 100) it’s displayed the same position. The problem was other than the multiple of 100 zoom level the DIV position changed. How can I fix this issue ?
I have created the sample page in jsfiddle . please run the page in chrome browser and zoom the browser ( ctrl + ) the red color DIV position will be change, this is the issue. I really hope some one find a solution for this.
HTML :
<table width="700px" class="custom">
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<div>
<div class="apptest">
</div>
</div>
CSS :
table
{
border-collapse:collapse;
}
.custom tr td
{
height:20px;
border:1px solid;
background-color:White;
}
.apptest
{
height:70px;
width:400px;
position:absolute;
top:239px;
left:10px;
background-color:Red;
}
The only thing I can suggest that should maintain the same appearance under zoom is to have your table and your "apptest" div in the same container:
<div class="container">
<table class="custom">...</table>
<div class="apptest"></div>
</div>
See the fiddle: http://jsfiddle.net/mJcsb/4/
You're at a mercy of a completely proprietary algorithm though (Chrome's Zoom algorithm) so any irregularities in layout under zoom are completely possible.
I got a table with a couple <td>:
<table>
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px;">
<div>
Third
</div>
</td>
</tr>
</table>
What I want to do is to place the "Third" <td> (with the div) to the right side of the table and the "First" and "Second" <td> should stay left.
Style with float:right; didn't work for me...
You need to make your table's width 100%, then control the widths of your first 2 columns, and finally right-align your third column.
http://jsfiddle.net/25Mqa/1/
<table>
<tr>
<td class="first">First</td>
<td class="second">Second</td>
<td class="third">Third</td>
</tr>
</table>
CSS:
table { width:100%; }
.first, .second { width:50px; }
.third { text-align:right; }
The problem is that the width of a <table> is determined by its content, by default. If you want the <table> to span 100% width (of its containing block) like block-level elements do, you can either add table-layout: fixed; and then specify your width - or just give it a width, depending on what you're after, e.g.
table {
width: 100%;
}
http://jsfiddle.net/QEaAd/2/
try add style="text-align:right;"
<table>
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px; text-align:right;">
<div>
Third
</div>
</td>
</tr>
</table>
Only if you have 2 divs one near other:
<div id="fr">div1</div>
<div id="fr">div2</div>
you can float them right:
<style>
#fr{float:right;}
</style>
<table style="width: 100%;">
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px; display: block; float: right;">
<div>
Third
</div>
</td>
</tr>
</table>
http://jsfiddle.net/pbesD/
I believe this does what you want, however from what I understand, floating table elements will cause problems in versions of Internet Explorer <8
I dont know what you are trying to do with tables and divs? But I normally use this for emailers.
I use the align attribute for td's. This helps a lot in making sure your layout looks the way you want. And it works in all browsers :)
FIDDLE
HTML:
<table width="100%">
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px;" align="right">
<div>
Third
</div>
</td>
</tr>
</table>
In Bootstrap 5.2 you can add .text-start and .text-end to your text class to align elements inside a table.