Html 响应表中未显示表头

我的站点中有一个表，它的显示方式如下

分辨率为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); }

请帮助我怎么做。我从你那里得到的。第三个例子

我的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_表的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=”“

请检查下面的代码片段，并将标题标题值添加到代码中，它将正常工作

“这里介绍的这种技术依赖于使用HTML5数据属性并通过CSS访问它们来指定列标题。另一种选择是将列标题硬编码到CSS中，但众所周知，CSS中的内容是一个巨大的禁忌。” 谢谢

/*强制表不再像表一样*/
#没有桌子了，
#没有更多的桌子了thead，
#再也没有桌子了，
#再也没有桌子了，
#没有更多的桌子了，
#没有更多的表了{
显示：块；
}
/*隐藏表格标题（但不显示：none；，用于辅助功能）*/
#没有更多的表了
位置：绝对位置；
顶部：-9999px；
左：-9999px；
}
#不再有表tr{border:1px solid#ccc；}
#没有更多的表了{
/*表现得像“一排”*/
边界：无；
边框底部：1px实心#eee；
位置：相对位置；
左：50%；
空白：正常；
文本对齐：左对齐；
}
#在{
/*现在就像一个表格标题*/
位置：绝对位置；
/*上/左值模拟填充*/
顶部：6px；
左：6px；
宽度：45%；
右边填充：10px；
空白：nowrap；
文本对齐：左对齐；
字体大小：粗体；
}
/*
标记数据
*/
#在{content:attr（数据标题）；}

学历
如果是CGPA/CPI，请填写相应的百分比。
度
度
学院/大学
过年
%
班
专业/分支机构
博士学位
:
---选择学位---
博士
---选课---
差别
头等舱
二等舱
及格

好，那么您从错误的位置获取了代码，请在您提供的链接上单击“响应数据表”链接。它将带你到这个页面下载整个zip文件。然后将

resposive.html

重命名为

index.html

，并将旧的

index.html

重命名为

z-index.html

以隐藏它。我在我的服务器上发布的结果显示它工作

它仍然不工作，我把代码放在上面，谢谢你的帮助。@DivyeshJesadiya，你错过了“数据标题”，我已经更新了我的代码片段，请检查。。一切正常..如何更改数据标题字体大小？或者如何显示拼贴/univercity到拼贴/
univercity。要更新样式，可以向“#不再有表td:before{}”添加属性，但是HTML标记不会使用data属性呈现。您是否遵循了我列出的说明？我如何将其放到上面列出的示例中？您的问题中没有完整的代码，因此我为您提供了所有代码的链接，以防您看不到。我不会为您编写代码，但是我认为如果您查看他的整个代码，您缺少的内容会更有意义。我知道了…我错过了数据标题。谢谢您的帮助。