我的目标是创建在手机上查看时看起来不错的响应式表格设计(宽度低于 480 像素)。
我的表有以下标记:
<table class="table eventlist">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Duration</th>
<th>Location</th>
<th>Cost</th>
</tr>
</thead>
<tr>
<td data-title="Code">AAC</td>
<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td data-title="Price" class="numeric">$1.38</td>
<td data-title="Change" class="numeric">-0.01</td>
<td data-title="Change %" class="numeric">-0.36%</td>
<td data-title="Open" class="numeric">$1.39</td>
</tr>
</table>
以及以下 CSS:
/* Landscape phones and down */
@media (max-width: 480px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
display:none;
}
tr {
border: 1px solid #ccc;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:right;
}
td:before {
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
td:before {
content: attr(data-title);
}
}
我的桌子最终看起来像这样:
你会说这是一个很好的用户友好的响应式设计吗?
如何编辑该行:
td:before {
content: attr(data-title);
}
这样它就可以读取<th>
列?
这是一个活生生的例子:JS Fiddle