Table Responsive with css 01

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Table | Par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="style.css" rel="stylesheet" type="text/css">		
</head>
<body>
	<table>
		<caption>Statement Summary</caption>
		<thead>
		  <tr>
			<th scope="col">Account</th>
			<th scope="col">Due Date</th>
			<th scope="col">Amount</th>
			<th scope="col">Period</th>
		  </tr>
		</thead>
		<tbody>
		  <tr>
			<td data-label="Account">Visa - 3412</td>
			<td data-label="Due Date">04/01/2020</td>
			<td data-label="Amount">$1,190</td>
			<td data-label="Period">03/01/2020 - 03/31/2020</td>
		  </tr>
		  <tr>
			<td scope="row" data-label="Account">Visa - 6076</td>
			<td data-label="Due Date">03/01/2020</td>
			<td data-label="Amount">$2,443</td>
			<td data-label="Period">02/01/2020 - 02/29/2020</td>
		  </tr>
		  <tr>
			<td scope="row" data-label="Account">Corporate AMEX</td>
			<td data-label="Due Date">03/01/2020</td>
			<td data-label="Amount">$1,181</td>
			<td data-label="Period">02/01/2020 - 02/29/2020</td>
		  </tr>
		  <tr>
			<td scope="row" data-label="Acount">Visa - 3412</td>
			<td data-label="Due Date">02/01/2020</td>
			<td data-label="Amount">$842</td>
			<td data-label="Period">01/01/2020 - 01/31/2020</td>
		  </tr>
		</tbody>
	</table>
</body>
</html>
body {
	font-family: "Open Sans", sans-serif;
	line-height: 1.25;
  }
  
  table {
	border: 1px solid #ccc;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
  }
  
  table caption {
	font-size: 1.5em;
	margin: .5em 0 .75em;
  }
  
  table tr {
	background-color: #f8f8f8;
	border: 1px solid #ddd;
	padding: .35em;
  }
  
  table th,
  table td {
	padding: .625em;
	text-align: center;
  }
  
  table th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
  }
  
  @media screen and (max-width: 600px) {
	table {
	  border: 0;
	}
  
	table caption {
	  font-size: 1.3em;
	}
	
	table thead {
	  border: none;
	  clip: rect(0 0 0 0);
	  height: 1px;
	  margin: -1px;
	  overflow: hidden;
	  padding: 0;
	  position: absolute;
	  width: 1px;
	}
	
	table tr {
	  border-bottom: 3px solid #ddd;
	  display: block;
	  margin-bottom: .625em;
	}
	
	table td {
	  border-bottom: 1px solid #ddd;
	  display: block;
	  font-size: .8em;
	  text-align: right;
	}
	
	table td::before {
	  /*
	  * aria-label has no advantage, it won't be read inside a table
	  content: attr(aria-label);
	  */
	  content: attr(data-label);
	  float: left;
	  font-weight: bold;
	  text-transform: uppercase;
	}
	
	table td:last-child {
	  border-bottom: 0;
	}
  }

                                    
Background overlay

Background overlay

Card Profile Style01

Card Profile Style01

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Carousel Bootstrap3

Carousel Bootstrap3

Changer le style du scroll bar in html

Changer le style du scroll bar in html

ChartJS style01

ChartJS style01

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Image hover Flip Flap Style

Image hover Flip Flap Style

Nav Menu style01

Nav Menu style01

Page 404 exemple 01

Page 404 exemple 01

Timeline style05

Timeline style05

Vers le haut

Vers le haut