Flex Table

What is a flex table How do you make a flex table? This script and codes were developed by Simeon Simeonoff on 21 November 2021, Sunday.

How do I make an flex table?
  1. Flex Table Previews
  2. Flex Table HTML Codes
  3. Flex Table CSS Codes
Flex Table Previews

Flex Table 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 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;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.