Skip to content

Instantly share code, notes, and snippets.

@abcdeepakr

abcdeepakr/flexTable.html

Last active February 23, 2023 13:30
Show Gist options
  • Save abcdeepakr/3aa2f00ed916f06b186d6c11fd708d82 to your computer and use it in GitHub Desktop.
Save abcdeepakr/3aa2f00ed916f06b186d6c11fd708d82 to your computer and use it in GitHub Desktop.
Download ZIP
responsive flexbox table
Raw
flextable.css
.container,
.header,
.table-body,
.table-body__row{
display: flex;
}
.container{
flex-direction: column;
width: 80%;
margin: auto auto;
}
.header{
justify-content: space-between;
}
.table-body{
flex-direction: column;
}
.table-body__row{
justify-content: space-between;
}
.header-cell,
.body-cell{
width: 100%;
border: 1px solid black;
text-align: center;
padding: 10px 0px ;
}
Raw
flexTable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox Table</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<container class="container">
<header class="header">
<hcell class="header-cell">Id</hcell>
<hcell class="header-cell">Name</hcell>
<hcell class="header-cell">Age</hcell>
<hcell class="header-cell">Gender</hcell>
</header>
<tablebody class="table-body">
<tablebodyrow class="table-body__row">
<bodycell class="body-cell">01</bodycell>
<bodycell class="body-cell">Deepak</bodycell>
<bodycell class="body-cell">23</bodycell>
<bodycell class="body-cell">Male</bodycell>
</tablebodyrow>
<tablebodyrow class="table-body__row">
<bodycell class="body-cell">02</bodycell>
<bodycell class="body-cell">Rubin</bodycell>
<bodycell class="body-cell">24</bodycell>
<bodycell class="body-cell">Male</bodycell>
</tablebodyrow>
<tablebodyrow class="table-body__row">
<bodycell class="body-cell">03</bodycell>
<bodycell class="body-cell">Kat</bodycell>
<bodycell class="body-cell">20</bodycell>
<bodycell class="body-cell">Female</bodycell>
</tablebodyrow>
</tablebody>
</container>
</body>
</html>
@abcdeepakr
Copy link
Author

html table using flexbox layout

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment