How to change the position of a table in CSS?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, learn How to change the position of a table in CSS?.

To change the position of a table, putting .position: absolute in the css class gives space to the position of a table.

Table of contents

  • Includes css in html page
  • Include the code in body

This article will guide you to adding change the change the position of a table css with example.

Step 1: Includes css in html page

Here we are using css class to set a table .position: absolute.

         table,
        th,
        td {
            border: 1px solid black;
        }


        table {
            border: 1px solid black;
            position: absolute;
            top: 200px;
            left: 300px;
        }           

Step 2: Include the code in body

Include the code below in <body> to accept table.

    <h1>Change the position of a table in CSS</h1>
    <table class="mytable">
        <tbody>
            <tr>
                <th style="width:200px; border-right:1px solid black;">one</th>
                <th style="width:200px">two</th>
            </tr>
            <tr>
                <td>detail one</th>
                <td>detail two</th>
            </tr>
        </tbody>
    </table>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html>

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }


        table {
            border: 1px solid black;
            position: absolute;
            top: 200px;
            left: 300px;
        }
    </style>
</head>

<body>
    <h1>Change the position of a table in CSS</h1>
    <table class="mytable">
        <tbody>
            <tr>
                <th style="width:200px; border-right:1px solid black;">one</th>
                <th style="width:200px">two</th>
            </tr>
            <tr>
                <td>detail one</th>
                <td>detail two</th>
            </tr>
        </tbody>
    </table>

</body>

</html>

Check the output of the above code example.

Bootstrap, position-table

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Stay tuned working on React Js Cheat Sheets Book

Related Posts