我的网站中有一个表格，它的显示如下。 
分辨率为 320px 时，显示如下。
所以问题是它没有在左侧显示标题，例如学位、大学/大学等，以及媒体查询。
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables 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;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
请帮我看看该怎么做。我取自Responsive Tables 。第三个例子。
我的html代码是
<legend style="text-align:left;">Educational Qualification</legend>
<div id="no-more-tables">
<code>Incase of CGPA/CPI please write equivalent percentage.</code>
<table class="edu_table" style="margin-bottom:20px;margin-top:2px;" class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th>Degree</th>
<th style="width: 10px;"></th>
<th style="width: 175px;">Degree</th>
<th style="width: 175px;">College/University</th>
<th style="width: 90px;">Year of Passing</th>
<th style="width: 80px;">%</th>
<th style="width: 175px;">Class</th>
<th style="width: 175px;">Specialization/Branch</th>
</tr>
</thead>
<tbody>
<tr>
<td>Doctorate</td>
<td>:</td>
<td><select name="doc_degree">
<option value="0">---Select Degree---</option>
<option value="phd" selected>Phd</option>
</select></td>
<td><input type="text" name="doc_collage"></td>
<td><input type="text" name="doc_year" class="small_text" width="60"></td>
<td><input type="text" name="doc_percentage" class="small_text" width="60"></td>
<td><select name="doc_class">
<option value="0">---Select Class---</option>
<option value="destinction">Distinction</option>
<option value="first class">First Class</option>
<option value="second class">Second Class</option>
<option value="pass class">Pass Class</option>
</select></td>
<td><input type="text" name="doc_branch"></td>
</tr>
<tr>
<td>Post Graduate</td>
<td>:</td>
<td><select name="postg_degree">
<option value="0">---Select Degree---</option>
<option value="M.E/M.Tech">M.E/M.Tech</option>
<option value="M.sc">M.sc.</option>
<option value="M.B.A.">M.B.A.</option>
<option value="M.A.">M.A.</option>
<option value="M.Phil.">M.Phil.</option>
</select></td>
<td><input type="text" name="postg_collage"></td>
<td><input type="text" name="postg_year" class="small_text" width="60"></td>
<td><input type="text" name="postg_percentage" class="small_text" width="60"></td>
<td><select name="postg_class">
<option value="0">---Select Class---</option>
<option value="destinction">Distinction</option>
<option value="first class">First Class</option>
<option value="second class">Second Class</option>
<option value="pass class">Pass Class</option>
</select></td>
<td><input type="text" name="postg_branch"></td>
</tr>
<tr>
<td>Graduate</td>
<td>:</td>
<td><select name="grad_degree" required>
<option value="0">---Select Degree---</option>
<option value="B.E/B.Tech">B.E/B.Tech</option>
<option value="B.sc">B.sc.</option>
<option value="B.A.">B.A.</option>
</select></td>
<td><input type="text" name="grad_collage" required></td>
<td><input type="text" name="grad_year" class="small_text" width="60" required></td>
<td><input type="text" name="grad_percentage" class="small_text" width="60" required></td>
<td><select name="grad_class" required>
<option value="0">---Select Class---</option>
<option value="destinction">Distinction</option>
<option value="first class">First Class</option>
<option value="second class">Second Class</option>
<option value="pass class">Pass Class</option>
</select></td>
<td><input type="text" name="grad_branch"></td>
</tr>
<tr>
<td>Diploma</td>
<td>:</td>
<td><select name="diplo_degree">
<option value="0">---Select Degree---</option>
<option value="diploma" selected>Diploma</option>
</select></td>
<td><input type="text" name="diplo_collage"></td>
<td><input type="text" name="diplo_year" class="small_text" width="60"></td>
<td><input type="text" name="diplo_percentage" class="small_text" width="60"></td>
<td><select name="diplo_class">
<option value="0">---Select Class---</option>
<option value="destinction">Distinction</option>
<option value="first class">First Class</option>
<option value="second class">Second Class</option>
<option value="pass class">Pass Class</option>
</select></td>
<td><input type="text" name="diplo_branch"></td>
</tr>
<tr>
<td>HSC</td>
<td>:</td>
<td><select name="hsc_degree">
<option value="0">---Select Degree---</option>
<option value="HSC" selected>HSC</option>
</select></td>
<td><input type="text" name="hsc_collage"></td>
<td><input type="text" name="hsc_year" class="small_text" width="60"></td>
<td><input type="text" name="hsc_percentage" class="small_text" width="60"></td>
<td><select name="hsc_class">
<option value="0">---Select Class---</option>
<option value="destinction">Distinction</option>
<option value="first class">First Class</option>
<option value="second class">Second Class</option>
<option value="pass class">Pass Class</option>
</select></td>
<td><input type="text" name="hsc_branch"></td>
</tr>
<tr>
<td>Other</td>
<td>:</td>
<td><input type="text" name="other_degree" class="small_text" width="60"></td>
<td><input type="text" name="other_collage"></td>
<td><input type="text" name="other_year" class="small_text" width="60"></td>
<td><input type="text" name="other_percentage" class="small_text" width="60"></td>
<td><select name="other_class">
<option value="0">---Select Class---</option>
<option value="destinction">Distinction</option>
<option value="first class">First Class</option>
<option value="second class">Second Class</option>
<option value="pass class">Pass Class</option>
</select></td>
<td><input type="text" name="other_branch"></td>
</tr>
</tbody>
</table>
</div>
edu_table 的 css 是
.edu_table{
border-collapse: collapse;
border: 1px solid #72C02C;
float: left;
margin-left: 22px;
width: 96%;
}
.edu_table td{
border: 1px solid #72C02C;
height: 60px;
line-height: 60px;
text-align: center;
}
.edu_table th{
border: 1px solid #72C02C;
height: 20px;
line-height: 20px;
}
最佳答案
您错过了每个表格单元格的 data-title=""。
请检查下面的代码片段，并将带有 header 标题值的 data-title="" 添加到您的代码中，它将起作用。
plugin site 中提到了这一点“这里介绍的这种技术依赖于使用 HTML5 数据属性并通过 CSS 访问它们来指定列标题。另一种选择是将列标题硬编码到 CSS 中，但众所周知，CSS 中的内容是一个巨大的禁忌。不。” 谢谢
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables 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;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); } <legend style="text-align:left;">Educational Qualification</legend>
<div id="no-more-tables">
<code>Incase of CGPA/CPI please write equivalent percentage.</code>
<table class="edu_table" style="margin-bottom:20px;margin-top:2px;" class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th>Degree</th>
<th style="width: 10px;"></th>
<th style="width: 175px;">Degree</th>
<th style="width: 175px;">College/University</th>
<th style="width: 90px;">Year of Passing</th>
<th style="width: 80px;">%</th>
<th style="width: 175px;">Class</th>
<th style="width: 175px;">Specialization/Branch</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Degree">Doctorate</td>
<td>:</td>
<td data-title="Degree"><select name="doc_degree">
<option value="0">---Select Degree---</option>
<option value="phd" selected>Phd</option>
</select></td>
<td data-title="College/University"><input type="text" name="doc_collage"></td>
<td data-title="Year of Passing"><input type="text" name="doc_year" class="small_text" width="60"></td>
<td data-title="%"><input type="text" name="doc_percentage" class="small_text" width="60"></td>
<td data-title="Class"><select name="doc_class">
<option value="0">---Select Class---</option>
<option value="destinction">Distinction</option>
<option value="first class">First Class</option>
<option value="second class">Second Class</option>
<option value="pass class">Pass Class</option>
</select></td>
<td data-title="Specialization/Branch"><input type="text" name="doc_branch"></td>
</tr>
</tbody>
</table>
</div>关于html - 表格标题未显示在响应表格中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31691703/