How to create responsive table in which schema of table changes on break point using bootstrap or without bootstrap?

user_1762051 0
Viewed 43

I want to create a table which will get changed its schema on mobile screen breakpoint.

On big screen like laptop table should look like this:

Email Degination Team Last Active Location
alok@something.com Manager Sales 2022-06-20 India
amit@something.com Manager Sales 2022-06-19 USA

On mobile screen table should look like this:

alok@something.com
Degination Manager
Team Sales
Last Active 2022-06-20
Location India
amit@something.com
Degination Manager
Team Sales
Last Active 2022-06-19
Location USA

I dont want to mantain two <tables>/<div> for these two table views of same content.

How can I make single <table> which can show these two different views based on screen size?

responsive-table responsive-design bootstrap-5 html javascript
2 Answers
user_64872490

if you dont want to use 2 tables, maybe a css style to apply to the existing table based on the screen size,

something like this

table {
  display: flex;
  align-items: center;
  justify-content: center;
}
tbody {
    display: block;
    flex-direction: row;
}
tr {
    display: flex;
    flex-direction: column;
}
table, tr, td {
  border: 1px solid red;
}
thead{
  display: none;
}

and a working demo : https://jsfiddle.net/c37none/5u6zfe2n/1/

user_27690310
Related