Responsive Table Display
I'm trying to make a table display more responsively. I've tried following CSS-tricks ( https://css-tricks.com/responsive-data-tables/) method for the two column layout, and have
Solution 1:
.dn {
display: none;
}
@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
color: #ffffff;
font-weight: bold;
}
thead tr{
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
border-bottom: 1px solid rgb(221, 221, 221);
position: relative;
padding-left: 30%;
text-align: left;
white-space: normal;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: normal;
}
td:nth-of-type(1):before { content: "A"; }
td:nth-of-type(2):before { content: "B"; }
td:nth-of-type(3):before { content: "C"; }
td:nth-of-type(4):before { content: "D"; }
td:nth-of-type(5):before { content: "E"; }
}
}
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class='dn'>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
Solution 2:
I think the [rowspan="2"] attribute may causing you problems.
At third "tr" tag of "tbody" tag a Column is missing.
Sorry my bad english.
Post a Comment for "Responsive Table Display"