【发布时间】：2015-03-09 20:58:16
【问题描述】：
我正在尝试使 bootstrap 3 表完全响应，因为它在 this link. 中完成。以下是供您参考的 CSS：
<style>
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)
{
/* 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;
}
tr
{
border: 1px solid #ccc;
}
td
{
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before
{
/* Now like a table header */
position: absolute; /* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before
{
content: "Sno";
}
td:nth-of-type(2):before
{
content: "Vehicle Number";
}
td:nth-of-type(3):before
{
content: "Last Location Timestamp";
}
td:nth-of-type(4):before
{
content: "Speed (In Km/hr)";
}
td:nth-of-type(5):before
{
content: "Status";
}
td:nth-of-type(6):before
{
content: "Address";
}
}
</style>
我面临以下问题
- 表格数据和表格标题在同一行中重叠。如图所示
- 表头在此处被视为一行，因此行颜色也应用于表头值。当屏幕很小时，我希望标题显示为黑色。
HTML：
<div class="table-responsive">
<table class="table" id="gridSummary">
<tr class="text-danger"><td>1</td><td>UP14 CL 1557</td><td>09-Mar-2015 17:47:40</td><td>0</td><td>Stop</td><td>23, Link Road, Sahibabad Industrial Area Site 4, Sahibabad, Ghaziabad, Uttar Pradesh 201010, India</td></tr>
</table>
</div>
有什么办法可以解决吗？
【问题讨论】：
-
你能创建一个演示小提琴吗？
标签： html css twitter-bootstrap twitter-bootstrap-3