New to CSS! I have a css code written to make my tables responsive. The same code works perfectly when put inside directly in <style> tag but doesnt work when i put a class and refer that class in div. Below are the codes:
WORKING:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#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: "Secret Alias"; }
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"; }
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
NOT WORKING:
<!DOCTYPE html>
<html>
<head>
<style>
.custom-accordiontable{
/*
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 {
margin: 0 0 1rem 0;
}
tr:nth-child(odd) {
background: #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: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
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: "Secret Alias"; }
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"; }
}
}
</style>
</head>
<body>
<div class="custom-accordiontable">
<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>
</tbody>
</table>
</div>
</body>
</html>
Since you are adding a class in your parent div element which is custom-accordionable
You have to pass that parent element class every table,tr,th,td when you are doing css.
Here's a best example: (Also when you are doing media queries the css class should be inside the media query tag for it to work.)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
.custom-accordiontable table, .custom-accordiontable thead, .custom-accordiontable tbody, .custom-accordiontable th, .custom-accordiontable td, .custom-accordiontable tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.custom-accordiontable thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.custom-accordiontable tr { border: 1px solid #ccc; }
.custom-accordiontable td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
.custom-accordiontable 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
*/
.custom-accordiontable td:nth-of-type(1):before { content: "First Name"; }
.custom-accordiontable td:nth-of-type(2):before { content: "Last Name"; }
.custom-accordiontable td:nth-of-type(3):before { content: "Job Title"; }
.custom-accordiontable td:nth-of-type(4):before { content: "Favorite Color"; }
.custom-accordiontable td:nth-of-type(5):before { content: "Wars of Trek?"; }
.custom-accordiontable td:nth-of-type(6):before { content: "Secret Alias"; }
.custom-accordiontable td:nth-of-type(7):before { content: "Date of Birth"; }
.custom-accordiontable td:nth-of-type(8):before { content: "Dream Vacation City"; }
.custom-accordiontable td:nth-of-type(9):before { content: "GPA"; }
.custom-accordiontable td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
</style>
</head>
<body>
<div class="custom-accordiontable">
<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>
</div>
</body>
</html>
Quick Hints
[1] When you use css without responsive you should have a file called styles.css and use link tag to link that style inside your head tag.
<head>
<link rel="stylesheet" href="styles.css">
</head>
2 When you use media queries to do some modification in responsive mode add another file called media.css to separate your styles in media queries only.
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="media.css">
</head>
And inside your media file this should only call media queries and certain width you want to modify.
Here are some few examples:
#media only screen and (max-width: 1024px) {
// do some css modification here...
}
#media only screen and (max-width: 600px) {
// do some css modification here...
}
That way you can have a cleaner code and not putting all the styles inside the style tag in your html document.
Related
I have been having problem with table not wanting to change (everything else scales as it should) responsively using media queries on iOS, it works perfectly on android phones and tablets, but not on iOS. I have tried adding viewport meta tag, but it doesn't help. Anyone know how to fix it?
Part of media query that doesn't work:
table, thead, tbody, th, td, tr {
display: block;
max-width:100%;
}
th{
display:none;
}
td {
border: none;
position: relative;
padding-left: 50%;
font-size: 1em;
background-color: #F6F7FB;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
line-height: 4em;
vertical-align: middle;
font-weight: bold;
}
td:nth-of-type(2):before { content: "test"; }
td:nth-of-type(3):before { content: "test"; }
td:nth-of-type(4):before { content: "test"; }
td:nth-of-type(5):before { content: "test"; }
td:nth-of-type(6):before { content: "test"; }
td:nth-of-type(7):before { content: "test"; }
I am not sure, but for me changing display of the isn't correct. Also the position relative/absolut in tables won't work in most cases. Is it possible for you, to change table structure to divs structure with display table and table-cell? I always do that, when need to make some big table responsive and there is no problem with that
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have this sample:
link
CODE HTML:
<table class="table table-striped">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
<td>Phone</td>
<td>Adresss</td>
<td>Message</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>jhs#yahoo.com</td>
<td>0766323123</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Ronny</td>
<td>Stuard</td>
<td>ros#yahoo.com</td>
<td>0877223534</td>
<td>Test2</td>
<td>Test2</td>
</tr>
</tbody>
</table>
I found this example and want to do something like
sample responsive table
What I do not understand is how CSS code is written.
I need a short sample code CSS to turn my table to be like over there.Also if you know better examples to make a table responsive please put here
After all that is the best way to make a table responsive?
Thanks in advance!
Use this code of css for your table:
#media
only screen and (max-width: 500px),
(min-device-width: 500px) and (max-device-width: 500px) {
/* 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";
text-align: left;
font-size: 12px;
}
td:nth-of-type(2):before { content: "Last Name";
text-align: left;
font-size: 12px;
}
td:nth-of-type(2):before { content: "Email";
text-align: left;
font-size: 12px;
}
td:nth-of-type(2):before { content: "Phone";
text-align: left;
font-size: 12px;
}
td:nth-of-type(2):before { content: "Address";
text-align: left;
font-size: 12px;
}
td:nth-of-type(2):before { content: "Message";
text-align: left;
font-size: 12px;
}
}
#media (max-width: 500px)
{
td
{
font-size: 12px!important;
text-align: right!important;
padding-right: 5px;
}
}
Add the size of the screen as you want the table to be converted in responsive like the example you gave. In this case is for 500px and less.
I am designing a responsive html page containing images and tables.
Please see below code block of html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
body {
/*font: 14px/1.4 Georgia, Serif;*/
font-size: 11.0pt;
font-family: "Calibri","sans-serif";
}
#page-wrap {
margin: 5px;
}
p {
margin: 20px 0;
}
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #5388FF;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
</style>
<style>
#media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
img {
width: 100%;
}
/* 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: "Employee ID";
}
td:nth-of-type(2):before {
content: "Employee Name";
}
td:nth-of-type(3):before {
content: "Employee Address";
}
td:nth-of-type(4):before {
content: "Employee Phone";
}
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px;
}
img {
width: 100%;
}
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
img {
width: 100%;
}
}
</style>
</head>
<body>
<div id="page-wrap">
<img max-width="100%" src="Images/image001.png">
<table>
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Employee Address</th>
<th>Employee Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>John Smith</td>
<td>US</td>
<td>45454545</td>
</tr>
<tr>
<td>102</td>
<td>Dave Furber</td>
<td>US</td>
<td>45454546</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
When I browse the html page using hostname like http://mymachine:6000/test.html, the media query does not work in IE11 but works in Chrome.
However when I browse the page using IP in the URL the media query works just fine and the page is rendered correctly in Chrome and IE 11 for all the devices.
Can someone provide me inputs on how to resolve this issue?
Thanks,
Vinayak
For some reason IE was using IE7 mode for rendering this page.
Reference : Link
Adding the below tag solved the problem !!
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Thanks,
Vinayak
Are You using some kind of testing environment like XAMPP? It would also be helpful if we could see Your Html (cant comment, don't have enough reputation).
I'm trying to get a new page up containing a responsive table, using the code below. I've put the code in its own class 'resptable' but for some reason its affecting all tables (even ones not in any class) throughout my site. I can't seem to find why. Any help would be appreciated, thank you!
The CSS -
/*
Generic Styling, for Desktops/Laptops
*/
.resptable table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
.resptable tr:nth-of-type(odd) {
background: #eee;
}
.resptable th {
background: #333;
color: white;
font-weight: bold;
}
.resptable td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
/*
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 */
.resptable table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.resptable thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.resptable tr { border: 1px solid #ccc; }
.resptable td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
.resptable 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
*/
.resptable td:nth-of-type(1):before { content: "First Name"; }
.resptable td:nth-of-type(2):before { content: "Last Name"; }
.resptable td:nth-of-type(3):before { content: "Job Title"; }
.resptable td:nth-of-type(4):before { content: "Favorite Color"; }
.resptable td:nth-of-type(5):before { content: "Wars of Trek?"; }
.resptable td:nth-of-type(6):before { content: "Porn Name"; }
.resptable td:nth-of-type(7):before { content: "Date of Birth"; }
.resptable td:nth-of-type(8):before { content: "Dream Vacation City"; }
.resptable td:nth-of-type(9):before { content: "GPA"; }
.resptable td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
And here is the HTML:
<table class="resptable">
<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>
Such selector:
.resptable table, thead, tbody, th, td, tr
points to:
.resptable table,
thead,
tbody,
th,
td,
tr
So, just first selector in a list has your class resptable. Others are points to every thead, tbody, th, td, tr elements (without your class resptable).
And other point is that you table has resptable class. So, table is not in .resptable but table is .resptable:
table.resptable
I believe you was trying to write another one:
table.resptable,
.resptable thead,
.resptable tbody,
.resptable th,
.resptable td,
.resptable tr
I have a css table-card layout that uses the :before pseudo selector to insert the header name.
Also in my table, I created a button that fires an alert when pressed.
The problem is that the button does not work in the plunkr: http://plnkr.co/edit/ZKweKp
But when I take the css out, the buttons work as expected.
Here's the css:
.cards tr:nth-of-type(odd) {
background: #eee;
}
.cards th {
background: #333;
color: white;
}
.cards td,
.cards th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
/* Force table to not be like tables anymore */
.cards table,
.cards thead,
.cards tbody,
.cards th,
.cards td,
.cards tr {
display: block;
}
/* Hide table headers (but not display: none; for accessibility) */
.cards th {
position: absolute;
top: -9999px;
left: -9999px;
}
.cards tr { border: 1px solid #ccc; }
.cards td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 20%;
}
.cards 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;
}
.cards td:nth-of-type(1):before { content: "Date"; }
.cards td:nth-of-type(2):before { content: "User"; }
The html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#~1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="IndexController">
<table class='cards'>
<tr>
<th>Color</th>
<th>Button</th>
</tr>
<tr ng-repeat="color in pageData.colors">
<td>{{ color }}</td>
<td>
<button ng-click="pageFn.clickMe()">Click Me</button>
</td>
</tr>
</table>
</body>
</html>
And the JS:
var app = angular.module('app', []);
app.controller('IndexController', function ($scope) {
$scope.pageData ={};
$scope.pageFn = {};
$scope.pageData.colors = ['This is red. etc... ', 'This is green. etc...', 'Blue text here... asdfadsfadsfadsf a'];
$scope.pageFn.clickMe = function () {
console.log('hello');
alert('clicked!');
}
});
Just change your CSS of .cards td:before to this,
.cards td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: auto;
padding-right: 10px;
white-space: nowrap;
}
width:45% changed to width:auto;,which was preventing the button to get clicked.