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

                                    
Table bootstrap with Datatable

Table bootstrap with Datatable

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Nav Menu style02

Nav Menu style02

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Image hover effects style

Image hover effects style

Image hover 01

Image hover 01

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Carousel Bootstrap4

Carousel Bootstrap4

Card Bootstrap4 01

Card Bootstrap4 01

Background overlay

Background overlay

Arrows Defense Game

Arrows Defense Game