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).
Related
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.
When applying the following for media query, it is not working on mobile portrait mode. It works fine on mobile landscape mode and desktop.
Here is my code
.post-table-new {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
color: #000
}
.post-table-new tr,
.post-table-new th,
.post-table-new td {
border: 1.5px solid #000
}
.post-table-new {
background-color: #fff
}
.post-table-new td,
.post-table-new th {
display: table-cell;
text-align: center;
vertical-align: top
}
.post-table-new th {
background-color: #fe074e;
color: #fff
}
#media only screen and (max-width: 600px) {
td.hide-col {
display: none;
width: 0;
height: 0;
opacity: 0;
visibility: collapse;
}
th.hide-col {
display: none;
width: 0;
height: 0;
opacity: 0;
visibility: collapse;
}
}
<meta charset=UTF-8>
<meta name=viewport id=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<table class="post-table-new">
<tbody>
<tr>
<th>Heading</th>
<th>Heding 2</th>
<th class="hide-col">Heding 2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td class="hide-col">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="hide-col">6</td>
</tr>
</tbody>
</table>
Here i want to hide one column of the table. It is working fine in Desktop when reducing size of the browser.It is also working fine in mobile landscape mode but it is not working in mobile portrait mode.
// add orientation media query, landscape or portrait
#media screen and (max-width: 600px) , screen and (orientation:landscape)
Im trying to make a responsive header that changes font size for multiple different sizes of devices, but when using the #Media screen and (max-width: X px), it wont do any changes that i apply with it.
My code
#media screen and (max-width: 690px)
{
.container
{
width: 100%;
}
#header
{
width: 100%;
right: 0%;
}
#header h1
{
display: none;
}
#nav a
{
float: none;
display: block;
text-align: center;
}
#nav-right
{
float: none;
}
#nav:before
{
display: block;
position: absolute;
top: 10px;
right: 0%;
line-height: 40px;
font-size: 21px;
cursor: pointer;
}
#nav:after
{
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
}
#media screen and (max-width: 509px)
{
#nav
{
font-size: 16px;
}
}
#media screen and (max-width: 409px)
{
#nav
{
font-size: 8px;
}
}
I just want it to change the font size, but its not working for what ever reason, please help
Thank you
W.
It needs to know where one starts and the other ends - this is done by one pixel for smooth responsive layout I usually find it easier to work from the low size up as the low size starts at zero pixels wide so no min-width needs to be mentioned.
I'm going to reorder your media queries narrow to wide screen:
#media screen and (max-width: 409px)
{
#nav
{
font-size: 8px;
}
}
/* now I'm going to put a min width on this so that it knows it's range does NOT start at zero and won't clash with the previous media query */
/* notice this is 1px bigger than the previous max-width */
#media screen and (min-width: 410px) and (max-width: 509px)
{
#nav
{
font-size: 16px;
}
}
/* now I'm going to put a min width on this so that it knows it's where it's range does NOT start at zero and won't clash with the previous media queries */
/* notice this is 1px bigger than the previous max-width */
#media screen and (min-width: 510px) and (max-width: 690px)
{
.container
{
width: 100%;
}
#header
{
width: 100%;
right: 0%;
}
#header h1
{
display: none;
}
#nav a
{
float: none;
display: block;
text-align: center;
}
#nav-right
{
float: none;
}
#nav:before
{
display: block;
position: absolute;
top: 10px;
right: 0%;
line-height: 40px;
font-size: 21px;
cursor: pointer;
}
#nav:after
{
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
}
/* and there you have it */
have you added the viewport in your html file? if not then add viewport in head
tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is a solution for your problem to apply media query when screen size changes.
I have written a sample of code just to explain the format of applying media query for different screen sizes:
body {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
.footer_class{
position: fixed;
bottom: 0;
background: #dfdfec;
width: 100%;
text-align: center;
}
.header_class {
position: fixed;
top: 0;
background: #dfdfec;
width: 100%;
text-align: center;
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px) {
.title {
font-size:14px;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px) {
.title {
font-size:20px;
}
}
<DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<Header class="header_class">
<h1 class="title">Header Section</h1>
</Header>
<article>
<p>Content Section</p>
</article>
<footer class="footer_class">
<h1 class="title">Footer Section</h1>
</footer>
</body>
</html>
let's break down your media query to two parts:
#media only screen
This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.
and (min-device-width: 320px) and (max-device-width: 568px)
This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.
I hope this helps you to solve your problem.
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 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.