locked
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.

    Regards

    Rob

    Tuesday, May 14, 2019 7:08 AM

All replies

  • User753101303 posted

    Hi,

    Try :
    margin-left:auto;
    margin-right:auto

    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>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            table {
                border-collapse: collapse;
                margin: 0 auto;
                width: 500px;
                text-align: center;
            }
            table, th, td {
                border: 1px solid black;
                background-color:aqua;
            }
        </style>
    </head>
    <body>
            <table>
                <thead>
                    <tr>
                        <th>First</th>
                        <th>Last</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
    </body>
    </html>

    Best Regards,

    Jenifer

    Wednesday, May 15, 2019 6:33 AM