How to change the position of a table in CSS?
June 02, 2022Hi 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.
All the best 👍