Esteban Rodriguez Esteban Rodriguez - 5 days ago 7
CSS Question

How do I center a table?

I was wondering how to center this table? I'm having difficulties centering this. I've tried centering with CSS, but I may be doing something wrong when it comes to placing the tags in my CSS. I've tried the tags "table.tftable"

<style>
table {
-moz-border-radius: 5px !important;
border-collapse: collapse !important;
border: none !important;
}
table th, table td { border: none !important }
table th:first-child {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
table th:last-child {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
table tr:last-child td:first-child {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
table tr:last-child td:last-child {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
table tr:hover td { background-color: #2f2f2f !important }
<table id="tfhover" class="tftable" border="1">
<style type="text/css">
table.tftable {font-size:12px;color:#fbfbfb;width:100%;border-width: 1px;border-color: #686767;border-collapse: collapse;text-align:center;}
table.tftable th {font-size:12px;background-color:#171515;border-width: 1px;padding: 8px;border-color: #686767;text-align:center;}
table.tftable tr {background-color:#000000;}
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-color: #686767;text-align:center;}
</style>
<table id="tfhover" class="tftable" border="1" style="width: 680px;">
bunch of content
</table>

Answer

To centre the table on the page, or if it is inside a container put it in the centre of that use this code:

table.tftable {
    margin-right:auto;
    margin-left:auto;
}

If the left and right margins are equal then compliant browsers should automatically assume that the element needs to be centre-aligned

Demo http://jsfiddle.net/uKyQu/

Comments