Divyesh Jesadiya
Reputation: 957
table header not displaying in responsive table
i have table in my site and it's display like this.
and with 320px resolution it's display like this.
so problem is that it's not displaying the header on left side like.Degree,Collage/Univercity etc.and media query for that is.
/* 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); }
please help me how it can be done. i take it from Responsive Tables. third example.
my html code is
<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>
and css for edu_table is
.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;
}
Upvotes: 2
Views: 4152
Answers (2)
Vasimkhan
Reputation: 333
You have missed data-title="" for each table cell.
Please check below code snippet and add data-title="" with header title value to your code, it will work.
This is mentioned on plugin site "This technique as presented here relies on using HTML5 data attributes and accessing them via CSS to specify the column headings. The other option is to hard code the column headings into the CSS, but as we all know content in CSS is a huge no-no." Thanks
/* 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>Upvotes: 3
Adam Buchanan Smith
Reputation: 9439
OK so you got the code from the wrong spot, on the link you provided click on the "Responsive Data Tables" link. It will take you to this page http://css-tricks.com/responsive-data-tables/ download the entire zip file. then rename the resposive.html to index.html and rename the old index.html to z-index.html to hide it. the results I posted on my server to show it working http://a-b-smith.com/stackoverflow/
Upvotes: 1
Related Questions
- Why does responsive table is not working as expected?
- Bootstrap 4 responsive table header alignment issue
- Fixed table header with responsive table not working
- Responsive Table on Two or more table with different table header
- Responsive header not working
- Table fix header not working for small screens
- Responsive table mobile, header of table
- responsive code not working on table
- How to make a responsive table header?
- HTML Table Header isn't showing, how can it be fixed?