Flex Table

Developer
Simeon Simeonoff
Size
4,059 Kb
Views
34,408
  1. Flex Table Previews
  2. Flex Table HTML Codes
  3. Flex Table CSS Codes

How do I make an flex table?

What is a flex table? How do you make a flex table? This script and codes were developed by Simeon Simeonoff on 17 September 2022, Saturday.

Flex Table Previews
IQ Test

Flex Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex Table</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<table class="igx-table">	<caption class="igx-table__caption">	<div>	<h1>Desserts</h1>	</div>	</caption>	<thead class="igx-table__thead">	<tr class="igx-table__tr">	<th class="igx-table__th igx-table__th--number">	<div>Id</div>	</th>	<th class="igx-table__th">	<div class="igx-table__th-content">	<span class="icon material-icons">arrow_downward</span>	<span>Column 1</span>	</div>	</th>	<th class="igx-table__th">	<div>Column 2</div>	</th>	<th class="igx-table__th">	<div>Column 3</div>	</th>	</tr>	</thead>	<tbody class="igx-table__tbody">	<tr class="igx-table__tr">	<td class="igx-table__td igx-table__td--number">1</td>	<td class="igx-table__td">	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.	It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with	desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>	</td>	<td class="igx-table__td">	<p>Sed suscipit augue vel tincidunt vestibulum. Morbi viverra ac tellus vel vulputate. Etiam ullamcorper velit felis, ut fringilla ipsum posuere aliquam. Donec gravida turpis eu ipsum commodo facilisis. Suspendisse tempus, risus non molestie venenatis,	ligula dolor aliquet justo, ac dictum dui elit at dolor. Aliquam erat volutpat. Mauris mollis faucibus ipsum. Proin nec purus eget lorem vestibulum finibus. Sed bibendum hendrerit venenatis. Donec feugiat nec mi ut elementum. Interdum et malesuada	fames ac ante ipsum primis in faucibus.</p>	</td>	<td class="igx-table__td">	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt non nulla ac fringilla. Nulla vel eros nibh. Aliquam condimentum lacus ipsum, id mollis est faucibus sit amet. Vivamus sodales libero vitae ultrices faucibus. Curabitur condimentum	ornare risus vel tempor. Nulla id nibh ut mauris bibendum euismod in eget felis. In porta justo at ligula auctor pharetra. Quisque rutrum in risus vel congue. Ut a iaculis lectus, varius fermentum sapien. Sed ac accumsan justo.</p>	</td>	</tr>	<tr class="igx-table__tr">	<td class="igx-table__td igx-table__td--number">2</td>	<td class="igx-table__td">	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.	It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with	desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>	</td>	<td class="igx-table__td">	<p>Sed suscipit augue vel tincidunt vestibulum. Morbi viverra ac tellus vel vulputate. Etiam ullamcorper velit felis, ut fringilla ipsum posuere aliquam. Donec gravida turpis eu ipsum commodo facilisis. Suspendisse tempus, risus non molestie venenatis,	ligula dolor aliquet justo, ac dictum dui elit at dolor. Aliquam erat volutpat. Mauris mollis faucibus ipsum. Proin nec purus eget lorem vestibulum finibus. Sed bibendum hendrerit venenatis. Donec feugiat nec mi ut elementum. Interdum et malesuada	fames ac ante ipsum primis in faucibus.</p>	</td>	<td class="igx-table__td">	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt non nulla ac fringilla. Nulla vel eros nibh. Aliquam condimentum lacus ipsum, id mollis est faucibus sit amet. Vivamus sodales libero vitae ultrices faucibus. Curabitur condimentum	ornare risus vel tempor. Nulla id nibh ut mauris bibendum euismod in eget felis. In porta justo at ligula auctor pharetra. Quisque rutrum in risus vel congue. Ut a iaculis lectus, varius fermentum sapien. Sed ac accumsan justo.</p>	</td>	</tr>	<tr class="igx-table__tr">	<td class="igx-table__td igx-table__td--number">3</td>	<td class="igx-table__td">	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.	It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with	desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>	</td>	<td class="igx-table__td">	<p>Sed suscipit augue vel tincidunt vestibulum. Morbi viverra ac tellus vel vulputate. Etiam ullamcorper velit felis, ut fringilla ipsum posuere aliquam. Donec gravida turpis eu ipsum commodo facilisis. Suspendisse tempus, risus non molestie venenatis,	ligula dolor aliquet justo, ac dictum dui elit at dolor. Aliquam erat volutpat. Mauris mollis faucibus ipsum. Proin nec purus eget lorem vestibulum finibus. Sed bibendum hendrerit venenatis. Donec feugiat nec mi ut elementum. Interdum et malesuada	fames ac ante ipsum primis in faucibus.</p>	</td>	<td class="igx-table__td">	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt non nulla ac fringilla. Nulla vel eros nibh. Aliquam condimentum lacus ipsum, id mollis est faucibus sit amet. Vivamus sodales libero vitae ultrices faucibus. Curabitur condimentum	ornare risus vel tempor. Nulla id nibh ut mauris bibendum euismod in eget felis. In porta justo at ligula auctor pharetra. Quisque rutrum in risus vel congue. Ut a iaculis lectus, varius fermentum sapien. Sed ac accumsan justo.</p>	</td>	</tr>	<tr class="igx-table__tr">	<td class="igx-table__td igx-table__td--number">4</td>	<td class="igx-table__td">	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.	It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with	desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>	</td>	<td class="igx-table__td">	<p>Sed suscipit augue vel tincidunt vestibulum. Morbi viverra ac tellus vel vulputate. Etiam ullamcorper velit felis, ut fringilla ipsum posuere aliquam. Donec gravida turpis eu ipsum commodo facilisis. Suspendisse tempus, risus non molestie venenatis,	ligula dolor aliquet justo, ac dictum dui elit at dolor. Aliquam erat volutpat. Mauris mollis faucibus ipsum. Proin nec purus eget lorem vestibulum finibus. Sed bibendum hendrerit venenatis. Donec feugiat nec mi ut elementum. Interdum et malesuada	fames ac ante ipsum primis in faucibus.</p>	</td>	<td class="igx-table__td">	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt non nulla ac fringilla. Nulla vel eros nibh. Aliquam condimentum lacus ipsum, id mollis est faucibus sit amet. Vivamus sodales libero vitae ultrices faucibus. Curabitur condimentum	ornare risus vel tempor. Nulla id nibh ut mauris bibendum euismod in eget felis. In porta justo at ligula auctor pharetra. Quisque rutrum in risus vel congue. Ut a iaculis lectus, varius fermentum sapien. Sed ac accumsan justo.</p>	</td>	</tr>	<tr class="igx-table__tr">	<td class="igx-table__td igx-table__td--number">5</td>	<td class="igx-table__td">	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.	It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with	desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>	</td>	<td class="igx-table__td">	<p>Sed suscipit augue vel tincidunt vestibulum. Morbi viverra ac tellus vel vulputate. Etiam ullamcorper velit felis, ut fringilla ipsum posuere aliquam. Donec gravida turpis eu ipsum commodo facilisis. Suspendisse tempus, risus non molestie venenatis,	ligula dolor aliquet justo, ac dictum dui elit at dolor. Aliquam erat volutpat. Mauris mollis faucibus ipsum. Proin nec purus eget lorem vestibulum finibus. Sed bibendum hendrerit venenatis. Donec feugiat nec mi ut elementum. Interdum et malesuada	fames ac ante ipsum primis in faucibus.</p>	</td>	<td class="igx-table__td">	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt non nulla ac fringilla. Nulla vel eros nibh. Aliquam condimentum lacus ipsum, id mollis est faucibus sit amet. Vivamus sodales libero vitae ultrices faucibus. Curabitur condimentum	ornare risus vel tempor. Nulla id nibh ut mauris bibendum euismod in eget felis. In porta justo at ligula auctor pharetra. Quisque rutrum in risus vel congue. Ut a iaculis lectus, varius fermentum sapien. Sed ac accumsan justo.</p>	</td>	</tr>	<tr class="igx-table__tr">	<td class="igx-table__td igx-table__td--number">6</td>	<td class="igx-table__td">	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.	It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with	desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>	</td>	<td class="igx-table__td">	<p>Sed suscipit augue vel tincidunt vestibulum. Morbi viverra ac tellus vel vulputate. Etiam ullamcorper velit felis, ut fringilla ipsum posuere aliquam. Donec gravida turpis eu ipsum commodo facilisis. Suspendisse tempus, risus non molestie venenatis,	ligula dolor aliquet justo, ac dictum dui elit at dolor. Aliquam erat volutpat. Mauris mollis faucibus ipsum. Proin nec purus eget lorem vestibulum finibus. Sed bibendum hendrerit venenatis. Donec feugiat nec mi ut elementum. Interdum et malesuada	fames ac ante ipsum primis in faucibus.</p>	</td>	<td class="igx-table__td">	<p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt non nulla ac fringilla. Nulla vel eros nibh. Aliquam condimentum lacus ipsum, id mollis est faucibus sit amet. Vivamus sodales libero vitae ultrices faucibus. Curabitur condimentum	ornare risus vel tempor. Nulla id nibh ut mauris bibendum euismod in eget felis. In porta justo at ligula auctor pharetra. Quisque rutrum in risus vel congue. Ut a iaculis lectus, varius fermentum sapien. Sed ac accumsan justo.</p>	</td>	</tr>	</tbody>	</table>
</div>
</body>
</html>

Flex Table - Script Codes CSS Codes

html,
body { height: 100%; box-sizing: border-box;
}
body { margin: 0 auto; font-family: 'Arial', sans-serif;
}
.container { padding: 24px;
}
.igx-table { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; width: 100%; background: #fff; border-radius: 2px; overflow: hidden; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}
.igx-table__caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 20px; line-height: 32px; padding: 16px 24px;
}
.igx-table__thead,
.igx-table__tfoot { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
}
.igx-table__tbody { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; position: relative; /* need this to position inner content */ overflow-y: auto;
}
.igx-table__tr { display: -webkit-box; display: -ms-flexbox; display: flex; background: inherit; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-bottom: 1px solid lightgray; -webkit-transition: background .2s ease; transition: background .2s ease;
}
.igx-table__tr:last-of-type { border-bottom: none;
}
.igx-table__tr:hover { background: #EEEEEE;
}
thead .igx-table__tr:first-of-type:hover { background: none;
}
.igx-table__th,
.igx-table__td { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 18px 24px; text-align: left; word-wrap: break-word; overflow: hidden;
}
.igx-table__th:nth-child(1),
.igx-table__td:nth-child(1) { min-width: 20px; -webkit-box-flex: 0.1; -ms-flex-positive: 0.1; flex-grow: 0.1; max-width: 25px;
}
.igx-table__th--number,
.igx-table__td--number { text-align: right;
}
.igx-table__th { font-weight: 600; font-size: 12px; color: rgba(0, 0, 0, 0.54);
}
.igx-table__th-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.igx-table__th-content .icon { margin-right: 8px; font-size: 16px; line-height: 16px; padding: 0;
}
.igx-table__td { font-size: 13px; line-height: 16px;
}
Flex Table - Script Codes
Flex Table - Script Codes
Home Page Home
Developer Simeon Simeonoff
Username simeonoff
Uploaded September 17, 2022
Rating 3
Size 4,059 Kb
Views 34,408
Do you need developer help for Flex Table?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Simeon Simeonoff (simeonoff) Script Codes
Name
Flexbox SASS Grid
Material Inputs
Material Switches
Material Radio Buttons
Material Checkboxes
Toggle Buttons
Notification Animation
Material Design Calendar
Avatar
Bouncy Switch
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!