Vfrdtyky

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:

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>

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

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;

}