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

                                    
Texte Block Posts Style01

Texte Block Posts Style01

Page 404 exemple 01

Page 404 exemple 01

Lightbox gallery style01

Lightbox gallery style01

Image hover Inspiration styles

Image hover Inspiration styles

Image hover 06

Image hover 06

Form contact avec validation en css

Form contact avec validation en css

Card Bootstrap4 02

Card Bootstrap4 02

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Ajouter une pagination1

Ajouter une pagination1

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table