Can't center a table in HTML5/CSS3 - html

Question

I'm trying to center the rows in a table element on a page, and they won't center--and I've discovered that for some reason the tbody (and so, the table) width are expanding to the entire width of the page, so margin: 0, auto; will not then center the table.
Instead, the contents of the <tr>s end up all pushed to the left, no matter what I do. The only way I've been able to get the table centered is do something like set the table to width: 10px (obviously smaller than it actually is), but then it also squishes all of its descendants and removes my control over their width, which is not desirable.
How can I get this table centered? Happy to provide more detail as is necessary if the code isn't enough.
PHP/HTML:
<table id="items" class="inventory-table center" border="0" cellpadding="0" cellspacing="0" width="100%">
<?php for($i=0; $i<3; $i++) { ?>
<tr id="inventory-row-<?php echo $i ?>" class="inventory-row">
<td class="inventory-image">
<img src="<my image>" />
</td>
<td class="inventory-name">
Classic frame
</td>
<td class="inventory-price">
$<span class="price">139</span>
</td>
<td class="purchase-number-td">
<span class="purchase-number"></span>
</td>
<td>
<div data-inventoryrownumber="<?php echo $i; ?>" class="arrow-up top-arrow purchase-arrow"></div>
<div data-inventoryrownumber="<?php echo $i; ?>" class="arrow-down bottom-arrow purchase-arrow"></div>
</td>
</tr>
<?php } ?>
</table>
SASS:
/* inventory table css */
$triangle-size: 30px;
.inventory-table {
border-spacing: 10px;
margin: 0 auto;
}
.inventory-row {
display: inline-block;
td {
text-align: center;
}
}
.inventory-image img {
width: 200px;
height: auto;
}
td.purchase-number-td {
min-width: 30px;
}
.arrow-up {
width: 0;
height: 0;
border-left: $triangle-size solid transparent;
border-right: $triangle-size solid transparent;
border-bottom: $triangle-size solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: $triangle-size solid transparent;
border-right: $triangle-size solid transparent;
border-top: $triangle-size solid black;
}
.top-arrow {
margin-bottom: 30px;
}
.bottom-arrow {
margin-top: 30px;
}
Screenshot from Chrome dev tools:

Answer 1

Well, what about adding a table_conteiner which you do can center?
I've added a div called table_container, and I've centred it using margin: 0 auto;. As the table is inside, is centred in your markup. I've also removed inline-block from the tr, as it made not possible to the td expand to fill all the row. Note that I modified the values of the PHP and SASS from the file to make it pure HTML and CSS, as it's easier to everybody to test a pure markup problem.
/* inventory table css */
.inventory-table {
border-spacing: 10px;
margin: 0 auto;
}
.inventory-row {
/*display: inline-block;*/
}
.inventory-row td {
text-align: center;
}
.inventory-image img {
width: 200px;
height: auto;
}
td.purchase-number-td {
min-width: 30px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid black;
}
.top-arrow {
margin-bottom: 30px;
}
.bottom-arrow {
margin-top: 30px;
}
.table_container {
width: 500px;
}
.table_container {
margin: 0 auto;
border: 1px solid black;
width: 700px
}
</style>
<div class="table_container">
<table id="items" class="inventory-table center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr id="inventory-row-1" class="inventory-row">
<td class="inventory-image">
<img src="<my image>" />
</td>
<td class="inventory-name">
Classic frame
</td>
<td class="inventory-price">
$<span class="price">139</span>
</td>
<td class="purchase-number-td">
<span class="purchase-number"></span>
</td>
<td>
<div data-inventoryrownumber="1" class="arrow-up top-arrow purchase-arrow"></div>
<div data-inventoryrownumber="1" class="arrow-down bottom-arrow purchase-arrow"></div>
</td>
</tr>
<tr id="inventory-row-1" class="inventory-row">
<td class="inventory-image">
<img src="<my image>" />
</td>
<td class="inventory-name">
Classic frame
</td>
<td class="inventory-price">
$<span class="price">139</span>
</td>
<td class="purchase-number-td">
<span class="purchase-number"></span>
</td>
<td>
<div data-inventoryrownumber="1" class="arrow-up top-arrow purchase-arrow"></div>
<div data-inventoryrownumber="1" class="arrow-down bottom-arrow purchase-arrow"></div>
</td>
</tr>
<tr id="inventory-row-1" class="inventory-row">
<td class="inventory-image">
<img src="<my image>" />
</td>
<td class="inventory-name">
Classic frame
</td>
<td class="inventory-price">
$<span class="price">139</span>
</td>
<td class="purchase-number-td">
<span class="purchase-number"></span>
</td>
<td>
<div data-inventoryrownumber="1" class="arrow-up top-arrow purchase-arrow"></div>
<div data-inventoryrownumber="1" class="arrow-down bottom-arrow purchase-arrow"></div>
</td>
</tr>
</table>
</div>

Answer 2

Adjust the table margin, Add:
margin: 0 auto;

Answer 3

fiddle
HTML
<table>
<th colspan='3'>header</th>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
CSS
table {
border: 1px solid red;
width: 100%; /* for small screens */
max-width: 20em; /* define width while keeping it flexible */
margin-right: auto;
margin-left: auto;
}