Issue
So I just started learning HTML and CSS and this is confusing me a little. This is my table and how it is supposed to look under 500px This is how it should look on screens 500px and larger
So I think I should use media query but I'm not sure how to
Solution
Let's use two media queries to handle the layout of the table and images dynamically depending on the width of the screen. the image will be floated left of the table for screen width larger than 500px and above the table for smaller than 500px,
This example assumes there is a jpg image "image.jpg" that exists in the same folder as your HTML file. You can change the src attribute of the image tag to be the actual path to your image.
@media screen and(min - width: 500 px) {
th,
td {
font - size: 16 px;
}
img {
margin - right: 25 px;
float: left;
}
}
@media screen and(max - width: 499 px) {
th,
td {
font - size: 10 px;
}
img {
display: block;
margin - bottom: 40 px;
}
}table {
margin-bottom: 30px;
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 2px solid #ccc;
padding: 6px;
text-align: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table</title>
</head>
<body>
<!-- Image for screens 500px and larger -->
<img src="image.jpg"
alt="Description of your image">
<table>
<thead>
<tr>
<th>Heading1</th>
<th>Heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>TableData1</td>
<td>TableData2</td>
</tr>
</tbody>
</table>
</body>
</html>Answered By - PandaSurge
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.