Responsive table styling

Developer
Camilla Knap
Size
2,891 Kb
Views
10,120
  1. Responsive table styling Previews
  2. Responsive table styling HTML Codes
  3. Responsive table styling CSS Codes

How do I make an responsive table styling?

Responsive table styling using pseudo element. What is a responsive table styling? How do you make a responsive table styling? This script and codes were developed by Camilla Knap on 29 November 2022, Tuesday.

Responsive table styling Previews
IQ Test

Responsive table styling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive table styling</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<table> <thead> <tr></tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> </thead> <tbody> <tr> <td data-th="Header 1">Table cell 1</td> <td data-th="Header 2">Table cell 2</td> <td data-th="Header 3">Table cell 3</td> <td data-th="Header 4">Table cell 4</td> <td data-th="Header 5">Table cell 5</td> </tr> <tr> <td data-th="Header 1">Table cell 1</td> <td data-th="Header 2">Table cell 2</td> <td data-th="Header 3">Table cell 3</td> <td data-th="Header 4">Table cell 4</td> <td data-th="Header 5">Table cell 5</td> </tr> <tr> <td data-th="Header 1">Table cell 1</td> <td data-th="Header 2">Table cell 2</td> <td data-th="Header 3">Table cell 3</td> <td data-th="Header 4">Table cell 4</td> <td data-th="Header 5">Table cell 5 </td> </tr> </tbody>
</table>
</body>
</html>

Responsive table styling - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
body { margin: 0; font-family: arial; font-size: 14px; background-color: #f5f5f5;
}
table { width: 100%; border-spacing: 0; border-collapse: collapse;
}
tr { border-bottom: 1px solid #000;
}
th { display: table-cell; text-align: left; vertical-align: top; padding: 20px 10px; font-weight: 600;
}
td { display: table-cell; padding: 10px; vertical-align: top;
}
td:before { content: attr(data-th) " "; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: inline-block; text-align: left; vertical-align: top; font-weight: 600;
}
@media only screen and (min-width: 641px) { td:before { display: none; }
}
@media only screen and (max-width: 640px) { td { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 5px; padding-bottom: 5px; } td:first-child { padding-top: 20px; } td:last-child { padding-bottom: 20px; }
}
@media only screen and (max-width: 640px) { thead { display: none; }
}
Responsive table styling - Script Codes
Responsive table styling - Script Codes
Home Page Home
Developer Camilla Knap
Username clknap
Uploaded November 29, 2022
Rating 3
Size 2,891 Kb
Views 10,120
Do you need developer help for Responsive table styling?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Camilla Knap (clknap) Script Codes
Name
Input label animation
Checkbox tag
Snap animate percentage
Morph svg icons with greensock
Css3 loader
Input label placeholder animation
CSS only accordion
Playing around with flexbox grid
Object-fit cover
Make links fill out the table cells.
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!