How to create responsive table in which schema of table changes on break point using bootstrap or wi-CodePudding

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
[email protected]	Manager	Sales	2022-06-20	India
[email protected]	Manager	Sales	2022-06-19	USA

On mobile screen table should look like this:

[email protected]
Degination Manager
Team Sales
Last Active 2022-06-20
Location India

[email protected]
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?

CodePudding user response：

if you are using bootstrap5 in your HTML you can use table-responsive class name in your <table> tag. Please refer this link: https://getbootstrap.com/docs/4.1/content/tables/#always-responsive

CodePudding user response：

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/