umerata
8/11/2017 - 10:32 AM

Responsive Table | label-css

Responsive Table


 <!-- Reference https://elvery.net/demo/responsive-tables/ -->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Testing Page</title>
    <!-- Normalize.css -->
    <!-- <link rel="stylesheet" href="https://necolas.github.io/normalize.css/6.0.0/normalize.css"> -->
    <!-- // Optional Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Your Css -->
    <style>
    html {
        padding: 50px;
        font-family: sans-serif;
    }
	
	/* Apply this class for when not using bootstrap table for full width and ui fixex*/

    .transform-table-normalize{
    		width:100%;
			border:1px solid #ddd;
    		
	}

	.transform-table-normalize thead th{
		border-bottom:2px solid #ddd;;
	}
	
	.transform-table-normalize th,
	.transform-table-normalize td{
		padding:8px;
	}
	.transform-table-normalize td{
		border-top: 1px solid #ddd;
	}
		

    
    @media only screen and (max-width: 800px) {

    	.table-transformable.transform-table-normalize td{
			border-top: 1px solid #ddd;
		}

		/* Put a left line */
        .table-transformable.left-line td:after {
            content: '';
            width: 1px;
            height: 100%;
            background-color: #ddd;
            position: absolute;
            left: 45%;
            top: 0;
        }
        

        /*Fix for bootstrap*/
        .table.table-transformable>tbody>tr>td {
            padding-left: 50%;
        }

        
        /* Force table to not be like tables anymore */
        .table-transformable table,
        .table-transformable thead,
        .table-transformable tbody,
        .table-transformable th,
        .table-transformable td,
        .table-transformable tr {
            display: block;
        }
        /* Hide table headers (but not display: none;, for accessibility) */
        .table-transformable thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        .table-transformable tr {
            border: 1px solid #ccc;
        }
        .table-transformable td {
            /* Behave like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
            white-space: normal;
            text-align: left;
        }
        .table-transformable td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }
        /*	Label the data	*/
        .table-transformable td:before {
            content: attr(data-title);
        }
    }
    </style>
</head>

<body>
    <h1>Responsive Table</h1>
    <h2>Using Bootstrap</h2>
    <table class='table-transformable table table-rasponsive left-line'>
        <thead>
            <tr>
                <th>Code</th>
                <th>Company</th>
                <th class="numeric">Price</th>
                <th class="numeric">Change</th>
                <th class="numeric">Change %</th>
                <th class="numeric">Open</th>
                <th class="numeric">High</th>
                <th class="numeric">Low</th>
                <th class="numeric">Volume</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-title="Code">AAC</td>
                <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                <td data-title="Price" class="numeric">$1.38</td>
                <td data-title="Change" class="numeric">-0.01</td>
                <td data-title="Change %" class="numeric">-0.36%</td>
                <td data-title="Open" class="numeric">$1.39</td>
                <td data-title="High" class="numeric">$1.39</td>
                <td data-title="Low" class="numeric">$1.38</td>
                <td data-title="Volume" class="numeric">9,395</td>
            </tr>
            <tr>
                <td data-title="Code">AAC</td>
                <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                <td data-title="Price" class="numeric">$1.38</td>
                <td data-title="Change" class="numeric">-0.01</td>
                <td data-title="Change %" class="numeric">-0.36%</td>
                <td data-title="Open" class="numeric">$1.39</td>
                <td data-title="High" class="numeric">$1.39</td>
                <td data-title="Low" class="numeric">$1.38</td>
                <td data-title="Volume" class="numeric">9,395</td>
            </tr>
            <tr>
                <td data-title="Code">AAC</td>
                <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                <td data-title="Price" class="numeric">$1.38</td>
                <td data-title="Change" class="numeric">-0.01</td>
                <td data-title="Change %" class="numeric">-0.36%</td>
                <td data-title="Open" class="numeric">$1.39</td>
                <td data-title="High" class="numeric">$1.39</td>
                <td data-title="Low" class="numeric">$1.38</td>
                <td data-title="Volume" class="numeric">9,395</td>
            </tr>
        </tbody>
    </table>

    <h2>Simple Table (without Bootstrap)</h2>

    <table class='table-transformable transform-table-normalize left-line'>
        <thead>
            <tr>
                <th>Code</th>
                <th>Company</th>
                <th class="numeric">Price</th>
                <th class="numeric">Change</th>
                <th class="numeric">Change %</th>
                <th class="numeric">Open</th>
                <th class="numeric">High</th>
                <th class="numeric">Low</th>
                <th class="numeric">Volume</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-title="Code">AAC</td>
                <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                <td data-title="Price" class="numeric">$1.38</td>
                <td data-title="Change" class="numeric">-0.01</td>
                <td data-title="Change %" class="numeric">-0.36%</td>
                <td data-title="Open" class="numeric">$1.39</td>
                <td data-title="High" class="numeric">$1.39</td>
                <td data-title="Low" class="numeric">$1.38</td>
                <td data-title="Volume" class="numeric">9,395</td>
            </tr>
            <tr>
                <td data-title="Code">AAC</td>
                <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                <td data-title="Price" class="numeric">$1.38</td>
                <td data-title="Change" class="numeric">-0.01</td>
                <td data-title="Change %" class="numeric">-0.36%</td>
                <td data-title="Open" class="numeric">$1.39</td>
                <td data-title="High" class="numeric">$1.39</td>
                <td data-title="Low" class="numeric">$1.38</td>
                <td data-title="Volume" class="numeric">9,395</td>
            </tr>
            <tr>
                <td data-title="Code">AAC</td>
                <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                <td data-title="Price" class="numeric">$1.38</td>
                <td data-title="Change" class="numeric">-0.01</td>
                <td data-title="Change %" class="numeric">-0.36%</td>
                <td data-title="Open" class="numeric">$1.39</td>
                <td data-title="High" class="numeric">$1.39</td>
                <td data-title="Low" class="numeric">$1.38</td>
                <td data-title="Volume" class="numeric">9,395</td>
            </tr>
        </tbody>
    </table>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <!-- // Optional Bootstrap -->
    <!--	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->

</body>

</html>