我编写了以设置宽度垂直对齐表数据的代码:
.table-striped tbody tr:nth-child(odd) {
background-color: #E7E9EB;
}
table {
table-layout: fixed;
}
table thead th {
text-align: left;
}
@media screen and (max-width: 600px) {
table thead th {
display: none;
}
table td {
display: block;
}
table td::before {
content: attr(data-label);
font-weight: bold;
margin-right:10px;
}
}<!-- This is a minimally styled version of the code found here https://whatabouthtml.com/ui-component/responsive-table-with-vertically-stacked-cells/ -->
<html>
<table width="100%" class="table-striped">
<thead>
<tr>
<th>Name</th>
<th>Document</th>
<th>Type</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">Jay</td>
<td data-label="Document">Handsome</td>
<td data-label="Type">Dog</td>
<td data-label="Color">Black</td>
</tr>
<tr>
<td data-label="Name">Carl</td>
<td data-label="Document">Friendly</td>
<td data-label="Type">Cat</td>
<td data-label="Color">Orange</td>
</tr>
<tr>
<td data-label="Name">Hissy</td>
<td data-label="Document">Eats well</td>
<td data-label="Type">Snake</td>
<td data-label="Color">Green</td>
</tr>
</tbody>
</table>
</html>这张表是这样写的:
当浏览器宽度减小时设置为:
但是，我希望表格数据单元格垂直对齐，如下所示:
我只想修改我的代码，因为这段代码比the solution I had before更容易管理.
如何修改此代码以实现垂直表数据对齐？