user2794426
Reputation:
How to make table responsive in html5?
I am using a table in my page. I want to make it responsive. I am using twitter bootstrap class but still it is not working. Want the circles in my page to be exactly side-by-side when the width is reduced same as it is in the desktop mode. Please help.
.circle {
width: 164px;
height: 164px;
border-radius: 164px;
cursor: pointer;
border: 1px solid #FFF;
background: url(http://s26.postimg.org/uzuwbdxc5/img_164.png) no-repeat;
}
.smcircle {
width: 65px;
height: 65px;
border-radius: 65px;
cursor: pointer;
border: 1px solid #FFF;
background: url(http://s26.postimg.org/4q9tslbet/img_65.png) no-repeat;
}<div class="container-fluid">
<table id="wtable" style="margin-top:152px; border:none;" width="100%" height="100%" align="center">
<tr>
<td colspan="51"> </td>
<td rowspan="15">
</td>
</tr>
<tr>
<td colspan="18"> </td>
<td colspan="9" rowspan="10" valign="top">
<div class="circle" style="vertical-align:text-top; margin-top:-33px;"></div>
</td>
<td rowspan="10" valign="top"> </td>
<td colspan="23" rowspan="2"> </td>
</tr>
<tr>
<td colspan="11" rowspan="2"> </td>
<td colspan="4" rowspan="3">
<div class="smcircle"></div>
</td>
<td colspan="3" rowspan="9"> </td>
</tr>
<tr>
<td colspan="14" rowspan="3"> </td>
<td colspan="4" rowspan="4">
<div class="smcircle"></div>
</td>
<td colspan="5" rowspan="5"> </td>
</tr>
<tr>
<td colspan="2" rowspan="29"> </td>
<td colspan="6" rowspan="9" valign="top">
<a class="html5lightbox" href="http://www.youtube.com/embed/YE7VzlLtp-4">
<div class="circle"></div>
</a>
</td>
<td colspan="3" rowspan="7"> </td>
</tr>
<tr>
<td colspan="4" rowspan="6"> </td>
</tr>
<tr>
<td colspan="4" rowspan="4"> </td>
<td colspan="2" rowspan="3">
<div class="smcircle"></div>
</td>
<td colspan="8" rowspan="4"> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td rowspan="9"> </td>
<td colspan="6" rowspan="9" valign="top">
<div class="circle" style=" margin-top: -28px; "></div>
</td>
<td colspan="2" rowspan="24"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="3" rowspan="8"> </td>
<td colspan="10" rowspan="7" valign="top">
<div class="circle" ></div>
</td>
<td rowspan="7"> </td>
</tr>
<tr>
<td rowspan="11"> </td>
<td colspan="12" rowspan="10" valign="top">
<div class="circle" style="margin-top:-25px;"></div>
</td>
<td colspan="7"> </td>
</tr>
<tr>
<td colspan="2" rowspan="6"> </td>
<td colspan="3" rowspan="3">
<div class="smcircle" style=" margin-top: -75px; "></div>
</td>
<td colspan="2" rowspan="6"> </td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td colspan="2" rowspan="8"> </td>
<td colspan="2" rowspan="5">
<div class="smcircle"></div>
</td>
<td colspan="2" rowspan="8"> </td>
</tr>
<tr>
<td colspan="3" rowspan="3"> </td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="8" rowspan="3"> </td>
<td colspan="9" rowspan="9" valign="top">
<div class="circle"></div>
</td>
<td rowspan="15"> </td>
</tr>
<tr>
<td colspan="8" rowspan="10" valign="top">
<div class="circle"></div>
</td>
<td colspan="2" rowspan="8"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="2" rowspan="3"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="8" rowspan="3"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="11"> </td>
<td rowspan="7"> </td>
<td>
</td>
</tr>
<tr>
<td rowspan="11"> </td>
<td colspan="9" rowspan="9" valign="top">
<div class="circle"></div>
</td>
<td colspan="8" rowspan="2"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="2" rowspan="3"> </td>
<td colspan="2" rowspan="2">
<div class="smcircle"></div>
</td>
<td colspan="4" rowspan="3"> </td>
<td>
</td>
</tr>
<tr>
<td rowspan="11"> </td>
<td colspan="6" rowspan="5" valign="top">
<div class="smcircle"></div>
</td>
<td rowspan="6"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td rowspan="11">
</td>
<td colspan="10" rowspan="8" valign="top">
<div class="circle"></div>
</td>
<td colspan="8"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="8" rowspan="5"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="9" rowspan="2"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="6"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="4" rowspan="5"> </td>
<td colspan="10" rowspan="7" valign="top">
<div class="circle"></div>
</td>
<td colspan="2" rowspan="7"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="9" rowspan="2"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="5" rowspan="4"> </td>
<td colspan="5" rowspan="7" valign="top">
<div class="circle"></div>
</td>
<td rowspan="18"> </td>
<td>
</td>
</tr>
<tr>
<td rowspan="17"> </td>
<td colspan="6" rowspan="10" valign="top">
<div class="circle"></div>
</td>
<td colspan="5" rowspan="2"> </td>
</tr>
<tr>
<td colspan="10" rowspan="2"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="3" rowspan="9"> </td>
<td colspan="4" rowspan="5" valign="top">
<div class="smcircle"></div>
</td>
<td colspan="3" rowspan="9"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="8"> </td>
<td colspan="6" rowspan="5">
<div class="smcircle"></div>
</td>
<td rowspan="9"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="8"> </td>
<td colspan="11" rowspan="10" valign="top">
<div class="circle"></div>
</td>
<td colspan="2" rowspan="8"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="8" rowspan="4"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="5" rowspan="6"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="4" rowspan="4"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="6" rowspan="4"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="5" rowspan="8"> </td>
<td colspan="2" rowspan="4">
<div class="smcircle"></div>
</td>
<td rowspan="8"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="6"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="4" rowspan="6"> </td>
<td colspan="11" rowspan="4">
<div class="circle"></div>
</td>
<td rowspan="6"> </td>
<td>
</td>
</tr>
<tr>
<td rowspan="5">
</td>
<td colspan="10" rowspan="4">
<div class="circle"></div>
</td>
<td colspan="3" rowspan="5"> </td>
<td>
</tr>
<tr>
<td colspan="2" rowspan="4" valign="top"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="11" rowspan="3"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="11" rowspan="2"> </td>
<td>
</td>
</tr>
<tr>
<td colspan="10"> </td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
</table>
</div>Upvotes: 0
Views: 5753
Answers (2)
Ravikumar Sharma
Reputation: 3740
add the table table-responsive class to your table.
this will add horizontal scroll for table in small devices.
Documentation of bootstrap-3 says: Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
see link for more explanation: http://jasonbradley.me/bootstrap-responsive-tables/ and documentation: http://getbootstrap.com/css/#tables
hope this will help
Update: updated your fiddle here: http://jsfiddle.net/p7nxa/4/embedded/result/
Upvotes: 1
Ranjith Kumar Nagiri
Reputation: 863
Table Code:
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>
CSS Code:
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
Responsice design CSS style:
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@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: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
try this one, it may be helpful to you.
Upvotes: 0
Related Questions
- How to make the html table responsive?
- Responsive table in bootstrap
- Responsive table handling in Twitter Bootstrap
- make a table responsive
- Responsive table with Bootstrap
- table responsive using bootstrap
- Responsive table bootstrap
- How to make the table responsive
- How to make html table made by list responsive?
- How to make bootstrap tables responsive?