I've been struggling for days to center a table, but no matter what I try, it just won't cooperate.
For some reason, using margin-right:auto and margin-left:auto within the DIV is not producing the desired centering effect!
I managed to make it responsive for mobile by applying specific margins in @media queries, but it feels like a hacky solution. It should be a simple task, yet I can't figure out why it's not centering properly and being responsive.
Another issue that should be straightforward.
Whenever I add images above the table, it messes up the layout of the table, making it look like this:
IMG
TABLE TABLE
TABLE
Any suggestions on how to solve either of these problems?
Here is the code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table{
text-align: center;
display:inline-table;
max-width: 33%;
height: 300px;
background-color: white;
margin: 15px;
border-collapse: collapse;
}
td,tr{
padding: 0;
vertical-align: middle;
}
table img{
max-height: 100%;
max-width: 100%;
}
#cont table
{
margin-left:auto;
margin-right:auto;
max-width:300px;
float: right;
}
#cont
{
margin-left:auto;
margin-right:auto;
max-width: 100%;
}
tr > td
{
padding-bottom: 0.5em;
}
@media only screen and (max-width: 480px) {
#cont
{
margin:60px;
}
}
</style></head>
<body>
<div id="cont">
<table>
<tr>
<td>
<img src="2.jpg"/>
</td>
</tr>
<tr>
<td>
a
</td>
</tr>
<tr>
<td>
a
</td>
</tr>
<tr>
<td>
a
</td>
</tr>
</table>
<table>
<tr>
<td>
<img src="2.jpg"/>
</td>
</tr>
<tr>
<td>
a </td>
</tr>
<tr>
<td>
a
</td>
</tr>
<tr>
<td>
a
</td>
</tr>
</table>
<table>
<tr>
<td>
a
</td>
</tr>
<tr>
<td>
a </td>
</tr>
<tr>
<td>
a </td>
</tr>
<tr>
<td>
a </td>
</tr>
</table>
</div>
</body>
</html>