表头不显示在响应表中
我的网站上有表格，并且显示如下。
并且以320px的分辨率显示它是这样的。
所以问题是它没有在左侧显示标题.Degree，Collage / Univercity等，媒体查询就是。
/* 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>
和cdu for edu_table是
.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;
}
2 个答案:
答案 0 :(得分：3)
您为每个表格单元格遗漏了data-title=""。
请检查下面的代码段并将data-title=""标题标题值添加到您的代码中，它会起作用。
这在plugin site＆＃34上提到;此处介绍的此技术依赖于使用HTML5数据属性并通过CSS访问它们以指定列标题。另一种选择是将列标题硬编码到CSS中，但是我们都知道CSS中的内容是一个巨大的禁忌。＆＃34; 感谢
＆＃13;
＆＃13;
＆＃13;
＆＃13;
/* 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>
答案 1 :(得分：1)
好的，所以你从错误的地方得到了代码，在你提供的链接上点击“响应数据表”链接。它会带你到这个页面http://css-tricks.com/responsive-data-tables/下载整个zip文件。然后将resposive.html重命名为index.html并将旧index.html重命名为z-index.html以隐藏它。我在服务器上发布的结果显示它正常工作http://a-b-smith.com/stackoverflow/
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？