Click here to Skip to main content
15,891,184 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
XML
<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>

    <title>Responsive Table</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/style.css">

    <!--[if !IE]><!-->
    <style>

    /*
    Max width before this PARTICULAR table gets nasty
    This query will take effect for any screen smaller than 760px
    and also iPads specifically.
    */
    @media
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        tr { border: 1px solid #ccc; }

        td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

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

        /*
        Label the data
        */
        td:nth-of-type(1):before { content: "First Name"; }
        td:nth-of-type(2):before { content: "Last Name"; }
        td:nth-of-type(3):before { content: "Job Title"; }
        td:nth-of-type(4):before { content: "Favorite Color"; }
        td:nth-of-type(5):before { content: "Wars of Trek?"; }
        td:nth-of-type(6):before { content: "Porn Name"; }
        td:nth-of-type(7):before { content: "Date of Birth"; }
        td:nth-of-type(8):before { content: "Dream Vacation City"; }
        td:nth-of-type(9):before { content: "GPA"; }
        td:nth-of-type(10):before { content: "Arbitrary Data"; }
    }

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
        body {
            padding: 0;
            margin: 0;
            width: 320px; }
        }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body {
            width: 495px;
        }
    }

    </style>
    <!--<![endif]-->

</head>

<body>

    <div id="page-wrap">
    <table>
        <thead>
        <tr>
            <th>Serial No.</th>
            <th>Employee Name</th>
            <th>Employee Address</th>
            <th>Employee Country</th>
            <th>Employee Email</th>
            <th>Employee ID</th>
            <th>Job Title</th>
            <th>Employee Category</th>
            <th>Edit Details</th>
            <th>Delete Data</th>
            <th>Other Details</th>

        </tr>
        </thead>

        <tbody>
            <?php//retrieving data from database
                $conn = mysql_connect("localhost","root","");
                $db = mysql_select_db('project',$conn);

                $que = "select * from e_reg";
                $run = mysql_query($que) or die (mysql_error());

                while($row=mysql_fetch_array($run)){
                    echo $e_num         = $row['e_no'];
                    echo $e_name    = $row[1];
                    echo $e_address     = $row[2];
                    echo $e_country     = $row[3];
                    echo $e_email   = $row[4];
                    echo $e_id      = $row[5];
                    echo $e_cat     = $row[6];
                    echo $e_salary  = $row[7];
                }
?>

    <tr>
        <td><?php echo $e_num; ?></td>
        <td><?php echo $e_name; ?></td>
        <td><?php echo $e_address; ?></td>
        <td><?php echo $e_country; ?></td>
        <td><?php echo $e_email; ?></td>
        <td><?php echo $e_id; ?></td>
        <td><?php echo $e_cat; ?></td>
        <td><?php echo $e_salary; ?></td>
        <td>Edit</td>
        <td>Delete</td>
        <td>Details</td>
    </tr>

                <?php } ?>
        </tbody>


        </table>

    </div>

</body>

</html>
Posted
Comments
Member 11646974 1-May-15 3:36am    
As I entered simple php code in the 'td' tag it did not work why is so.On the other hand my code is working with html tags only if I did not design them with css.
Mohibur Rashid 1-May-15 4:09am    
My point of view is: the one, who is dumping his/her entire code to find out the bracket error, is just lazy.
Herman<T>.Instance 1-May-15 5:34am    
exactly

Just remove
PHP
<?php } ?>
 
Share this answer
 
v2
Replace this whole lot:
HTML
                while($row=mysql_fetch_array($run)){
                    echo $e_num         = $row['e_no'];
                    echo $e_name    = $row[1];
                    echo $e_address     = $row[2];
                    echo $e_country     = $row[3];
                    echo $e_email   = $row[4];
                    echo $e_id      = $row[5];
                    echo $e_cat     = $row[6];
                    echo $e_salary  = $row[7];
                }
?>
    <tr>
        <td><?php echo $e_num; ?></td>
        <td><?php echo $e_name; ?></td>
        <td><?php echo $e_address; ?></td>
        <td><?php echo $e_country; ?></td>
        <td><?php echo $e_email; ?></td>
        <td><?php echo $e_id; ?></td>
        <td><?php echo $e_cat; ?></td>
        <td><?php echo $e_salary; ?></td>
        <td>Edit</td>
        <td>Delete</td>
        <td>Details</td>
    </tr>
 
                <?php } ?>

with the following while loop like this:
XML
while($row=mysql_fetch_array($run)){
    echo '<tr>';
    echo '<td>'.$row['e_no'].'</td>';
    echo '<td>'.$row[1].'</td>';
    // etc...etc...
    echo '<td>Edit</td>';
    echo '<td>Delete</td>';
    echo '<td>Details</td>';
    echo '</tr>';
}
?>

to construct each row (tr) at every loop.
 
Share this answer
 
v4

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900