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;}
Related
I want the cell align center , but keep text right align. for detail please run the code.
table{border:solid ; width:100%}
th{text-align:center}
td{text-align:center}
<div>now my table show like this</div>
<table>
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr><td>123</td><td>456</td><td>789</td></tr>
<tr><td>1231</td><td>4561</td><td>7891</td></tr>
<tr><td>12312</td><td>45612</td><td>78912</td></tr>
</table>
<br>
<div>but i want to like this</div>
<table>
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr><td> 123</td><td> 456</td><td> 789</td></tr>
<tr><td> 1231</td><td> 4561</td><td> 7891</td></tr>
<tr><td>12312</td><td>45612</td><td>78912</td></tr>
</table>
i solve it with add more th and td but it work Correctly
code
table{border:solid ; width:100%}
th{text-align:center}
td{text-align:right}
#td{
width: 20px;
}
<div>now my table show like this</div>
<table>
<tr><th> </th><th id="td">hello</th><th> </th><th id="td">world</th><th> </th><th id="td">jasper</th><th> </th></tr>
<tr><td> </td><td id="td">123</td><td> </td><td id="td">456</td><td> </td><td id="td">789</td><td> </td></tr>
<tr><td> </td><td id="td">1231</td><td> </td><td id="td">4561</td><td> </td><td id="td">7891</td><td> </td></tr>
<tr><td> </td><td id="td">12312</td><td> </td><td id="td">45612</td><td> </td><td id="td">78912</td><td> </td></tr>
http://liveweave.com/6EFpKY
One solution is to add a div inside th th and td elements and give them a fixed length.
HTML:
<table>
<tr>
<th>
<div>hello</div>
</th>
<th>
<div>world</div>
</th>
<th>
<div>jasper</div>
</th>
</tr>
<tr>
<td>
<div>123</div>
</td>
<td>
<div>456</div>
</td>
<td>
<div>789</div>
</td>
</tr>
<tr>
<td>
<div>1231</div>
</td>
<td>
<div>4561</div>
</td>
<td>
<div>7891</div>
</td>
</tr>
<tr>
<td>
<div>12312</div>
</td>
<td>
<div>45612</div>
</td>
<td>
<div>78912</div>
</td>
</tr>
</table>
CSS:
table {
border:solid;
width:100%
}
td div {
width:40px;
text-align:right;
margin-left: auto;
margin-right: auto;
}
th div {
width:40px;
text-align:right;
margin-left: auto;
margin-right: auto;
}
Try it out:
http://fiddle.jshell.net/hdgjnuab/1/
Hope it helps!
Change your CSS and HTML table code with below one.
CSS:
table{border:solid ; width:100%}
th{text-align:center}
td{direction:rtl;}
.title {margin-right:46%;}
HTML:
<table>
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr>
<td><span class="title">123</span></td>
<td><span class="title">456</span></td><td><span class="title">789</span></td></tr>
<tr><td><span class="title">1231</span></td><td><span class="title">4561</span></td><td><span class="title">7891</span></td></tr>
<tr><td><span class="title">12312</span></td><td><span class="title">45612</span></td><td><span class="title">78912</span></td></tr>
</table>
Output:
No need to define fix width of table cells.
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>
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
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.
how do you center align a table in the middle of the page using css. This is what I have http://jsfiddle.net/m5uEr/
<div style="text-align: center; border-style:solid;">
<table style="border-style:solid;">
<tr>
<td>test</td>
</tr>
</table>
</div>
table.center {
margin-left:auto;
margin-right:auto;
}
<table style="border-style:solid;" class="center">
<tr>
<td>test</td>
</tr>
</table>
Your updated fiddle
Google found it for me with this text: "center align table css"
Set a width on your table and set
margin:auto
css wasn't working so I did a <table align="center">
this is on IE8
Did you put margin-left:auto, margin-right:auto in the properties of the div?
That is easy to do.
Those properties should belong in table
<div style="text-align: center; border-style:solid;">
<table style="border-style:solid; margin-left:auto; margin-right:auto; ">
<tr>
<td>tdddest</td>
</tr>
</table>
</div>