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;
	}
  }

                                    
toggle switch style03

toggle switch style03

toggle switch style01

toggle switch style01

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Loading Style snake

Loading Style snake

Image hover 02

Image hover 02

Form login b4 01

Form login b4 01

Form contact avec validation en css

Form contact avec validation en css

Form Création de compte

Form Création de compte

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Card Profile Style01

Card Profile Style01