How To Make Responsive HTML Table Design in CSS

February 27, 2022

A responsive HTML table is a way to show a large table in a container and will display a horizontal scroll bar if the screen is too small to display the full content.

Now let’s create a responsive HTML Table: Open your code editor, create two files for HTML and CSS.

Write the basic HTML code inside your HTML file and connect your CSS file inside HTML, code given below:

<!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.0">
    <title>Responsive HTML Table</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

Now we need HTML code for our responsive table, the HTML code gives value with sample data, just copy and paste it inside the body tag of your HTML document.

HTML Code:

<div class="table_responsive">
    <table>
      <thead>
        <tr>
          <th>Sl</th>
          <th>Image</th>
          <th>Name</th>
          <th>Phone</th>
          <th>Address</th>
          <th>Action</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>01</td>
          <td><img src="https://imageoptimize.help//wp-content/uploads/2022/02/846799.png.webp" alt=""></td>
          <td>Muhibbullah Ansary</td>
          <td>+880 017xx-xxxxxx</td>
          <td>Mymensingh sadar</td>
          <td>
            <span class="action_btn">
              <a href="#">Edit</a>
              <a href="#">Remove</a>
            </span>
          </td>
        </tr>

        <tr>
          <td>02</td>
          <td><img src="https://imageoptimize.help//wp-content/uploads/2022/02/webp-to-png.png.webp" alt=""></td>
          <td>Moshior Rahman Arif</td>
          <td>+880 017xx-xxxxxx</td>
          <td>Mymensingh Sadar</td>
          <td>
            <span class="action_btn">
              <a href="#">Edit</a>
              <a href="#">Remove</a>
            </span>
          </td>
        </tr>


        <tr>
          <td>03</td>
          <td><img src="https://imageoptimize.help//wp-content/uploads/2022/02/youtube.png.webp" alt=""></td>
          <td>Suibe</td>
          <td>+880 017xx-xxxxxx</td>
          <td>Mymensingh Sadar</td>
          <td>
            <span class="action_btn">
              <a href="#">Edit</a>
              <a href="#">Remove</a>
            </span>
          </td>
        </tr>

      </tbody>
    </table>
  </div>
</div>

Now the time to make our table beautiful, that we need CSS and in this component, we use Roboto font from Google, the font CDN link is: @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');

And the CSS of this table is given below just copy and paste it in your CSS file then save and visit your HTML file and see the beautiful output.

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');

* {
    box-sizing: border-box;
}

body>div{
    min-height: 100vh;
    display: flex;
    font-family: 'Roboto', sans-serif;
}

.table_responsive {
    max-width: 900px;
    border: 1px solid #00bcd4;
    background-color: #efefef33;
    padding: 15px;
    overflow: auto;
    margin: auto;
    border-radius: 4px;
}

table {
    width: 100%;
    font-size: 13px;
    color: #444;
    white-space: nowrap;
    border-collapse: collapse;
}

table>thead {
    background-color: #00bcd4;
    color: #fff;
}

table>thead th {
    padding: 15px;
}

table th,
table td {
    border: 1px solid #00000017;
    padding: 10px 15px;
}

table>tbody>tr>td>img {
    display: inline-block;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 6px #0003;
}


.action_btn {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.action_btn>a {
    text-decoration: none;
    color: #444;
    background: #fff;
    border: 1px solid;
    display: inline-block;
    padding: 7px 20px;
    font-weight: bold;
    border-radius: 3px;
    transition: 0.3s ease-in-out;
}

.action_btn>a:nth-child(1) {
    border-color: #26a69a;
}

.action_btn>a:nth-child(2) {
    border-color: orange;
}

.action_btn>a:hover {
    box-shadow: 0 3px 8px #0003;
}


table>tbody>tr {
    background-color: #fff;
    transition: 0.3s ease-in-out;
}


table>tbody>tr:nth-child(even) {
    background-color: rgb(238, 238, 238);
}

table>tbody>tr:hover{
    filter: drop-shadow(0px 2px 6px #0002);
}

See Output In The Codepen:

Thank you for visiting our website, we have 100+ free online tools for:

Color conversion
Color generation
Image conversion
Image compressor
SEO
Storage Units Conversion
Head line generator
Content Management, etc…

Feel Free to visit the online tools site.

How To Make Responsive HTML Table Design in CSS

One response to “How To Make Responsive HTML Table Design in CSS”

Leave a Reply Cancel reply

Ads Blocker Detected!!!