Javascript AJAX jQuery HTML PHP Example MORE

How to create a responsive table in HTML and CSS

responsive-table.html

<!DOCTYPE html>
<html>
<head>
    <title>Responsive table</title>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td,
        th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #blue;
        }
    </style>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>1</td>
                <td>Sachin</td>
                <td>Mumbai</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Dhoni</td>
                <td>Ranchi</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Kohili</td>
                <td>Delhi</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Yuvraj</td>
                <td>Punjab</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Raina</td>
                <td>Chennai</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Rohit</td>
                <td>Mumbai</td>
            </tr>
        </table>
    </form>
</body>
</html>

Run it yourself

Output

Responsive table
1 Sachin Mumbai
2 Dhoni Ranchi
3 Kohili Delhi
4 Yuvraj Punjab
5 Raina Chennai
6 Rohit Mumbai