Centering Table without width 100% RRS feed

  • Question

  • User2037455357 posted

    Hello there.

    I want to center a table in the screen that doesnt have the width set to 100%.

    I have the following CSS

    .auto-style {

    width: 100%;

    text-align: center;


    This aligns the table contents to the center, but i want to center a table that is only 500px in width so i can put a border around it or colour the background.

    along with keeping the table contents centered as well.

    I also need this to responsive. this there a way of doing this please.



    Tuesday, May 14, 2019 7:08 AM

All replies

  • User753101303 posted


    Try :

    which should be found easily using any web search engine. Please try a quikc search first. For example https://www.granneman.com/webdev/coding/css/centertables is the first response when  searching for "center a table css"

    Tuesday, May 14, 2019 7:55 AM
  • User2037455357 posted

    Thank you

    i shall give this a go.

    Tuesday, May 14, 2019 8:05 AM
  • User839733648 posted

    Hi masterdineen,

    According to your description, I've made a simple demo and hope will help you.

    <!DOCTYPE html>
        <meta charset="utf-8" />
            table {
                border-collapse: collapse;
                margin: 0 auto;
                width: 500px;
                text-align: center;
            table, th, td {
                border: 1px solid black;
                        <td>the Bird</td>

    Best Regards,


    Wednesday, May 15, 2019 6:33 AM