Responsive css table

-
 



demo here : http://codepen.io/anon/pen/QwPVNW


code here :  
index.php

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Responsive table</title>   
        <link rel="stylesheet" href="css/style.css">
  </head>
 <body>
    <table>
  <thead>
    <tr>
      <th>Payment</th>
      <th>Issue Date</th>
      <th>Amount</th>
      <th>Period</th>
      <th>Issue Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Payment">Payment #1</td>
      <td data-label="Issue Date">02/01/2015</td>
      <td data-label="Amount">$2,311</td>
      <td data-label="Period">01/01/2015 - 01/31/2015</td>
       <td data-label="Issue Date">02/01/2015</td>
      <td data-label="Amount">$2,311</td>
      <td data-label="Period">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td data-label="Payment">Payment #2</td>
      <td data-label="Issue Date">03/01/2015</td>
      <td data-label="Amount">$3,211</td>
      <td data-label="Period">02/01/2015 - 02/28/2015</td>
    </tr>
  </tbody>
</table.  
  </body>
</html>
 
style.css

   body {
    font-family: arial;
  }
  table {
    border: 1px solid #ccc;
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
  }
  table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }
  table th, table td {
    padding: 10px;
    text-align: center;
  }
  table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
  }
  @media screen and (max-width: 600px) {
    table {
      border: 0;
    }
    table thead {
      display: none;
    }
    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }
    table td {
      display: block;
      text-align: right;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }
    table td:last-child {
      border-bottom: 0;
    }
    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }

Comments

Post a Comment

Popular posts from this blog

Real-Time Web Interface to MQTT using Socket.io and Node.js

-
Image
Real-Time Web Interface to MQTT using Socket.io and Node.js First, all credit for this tutorial goes to  Robert Hekkers Blog .  I've altered it slightly to pick up newer versions of the various javascript libraries. If you've followed along with my  earlier post , you now have MQTT running on your Raspberry Pi, and an Arduino IoT client that can publish and subscribe to MQTT packets.  The next step is developing a real-time web interface that can control your MQTT network. Why Socket.io and Node.js? Web browsers typically operate by pulling data from a server when you click on a link.  Servers don't usually keep an open connection to the browsers it has serviced, so if some event happens on the server side, the server cannot push that event to your browser, unless you refresh the page. That's where Socket.io comes in handy.  Socket.io maintains an open connection between the server and the browser, which enables the server to push updates to the bro...
Read more

Insert session variable into MySQL database

-
<?php session_start(); if(!isset($_SESSION['Username'])){ header("Location: login.php"); } ?>   $eventname = $_POST [ 'eventname' ]; $Username = $_SESSION [ 'Username' ] $sql = mysql_query ( "INSERT INTO tbl_name VALUES('','$eventname','{$_SESSION['Username']}')" ); echo "You have been added to the event" ;
Read more

Insert CheckBox and Radio button Data in MySQL Database Using PHP

-
Image
MY-SQL Code CREATE DATABASE IF NOT EXISTS databasename; CREATE TABLE students( student_name varchar(255) NOT NULL, student_email varchar(255) NOT NULL, student_contact varchar(255) NOT NULL, student_address varchar(255) NOT NULL, stars varchar(25) NOT NULL, sports varchar(25) NOT NULL, gender text(25) NOT NULL, )     Download Code     LIVE DEMO   page- formelements.php   php code <?php $connection = mysqli_connect("localhost", "root", "","formdatainsert"); // Establishing Connection with Server //$db = mysql_select_db("colleges", $connection); // Selecting Database from Server if(isset($_POST['submit'])){ // Fetching variables of the form which travels in URL $name = $_POST['name']; $email = $_POST['email']; $contact = $_POST['contact']; $address = $_POST['address']; $sports=implode(' , ',$_POST['sports']); $star=implode(' , ',$_POST['star']); ...
Read more