Menu
I would like to create a responsive table like this
Now, I have some large content of data(which is filled dynamically) for each cell, and if you notice this table overlaps the contents on least screen size(300 px and less). Though this can be managed, but I would like to have any optimal solution for this, if possible.
Any help would be appreciated.
477
It may be your answer please see result in full screen
table tr td,table tr td{
text-align: center;
}
@media only screen and (max-width: 500px) {
table,head,tbody,th,td,tr {
display: block;
}
thead tr {
display: none;
}
tr {
border: 1px solid #ccc;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
min-height: 30px;
overflow: hidden;
word-break:break-all;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
text-align:left;
font-weight: bold;
}
td:before { content: attr(data-title); }
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>designation</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Name">John</td>
<td data-title="ID">100</td>
<td data-title="designation">Software Engineer</td>
</tr>
<tr>
<td data-title="Name">Shyam</td>
<td data-title="ID">101</td>
<td data-title="designation">Quality Analyst</td>
</tr>
<tr>
<td data-title="Name">Mark</td>
<td data-title="ID">102</td>
<td data-title="designation">Software Engineer</td>
</tr>
<tr>
<td data-title="Name">Bill</td>
<td data-title="ID">104</td>
<td data-title="designation">Quality Analyst</td>
</tr>
<tr>
<td data-title="Name">Arjun</td>
<td data-title="ID">105</td>
<td data-title="designation">Human Resources</td>
</tr>
<tr>
<td data-title="Name">Pratyush</td>
<td data-title="ID">106</td>
<td data-title="designation">Software Engineer</td>
</tr>
<tr>
<td data-title="Name">Anant</td>
<td data-title="ID">101</td>
<td data-title="designation">Administrative Dept</td>
</tr>
</tbody>
</table>
</body>
</html>In above snippet you can use media query which screen size you want to stack td of table eg:300px
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
