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)
Related
So I am getting a table from a content management system called ButterCMS. And they have tables in the WYSIWYG components but I am trying to make it responsive without using the bootstrap scrollable horizon.
My code looks like this:
#import '../../../../styles/_variables.scss';
#import '../../../../../node_modules/bootstrap/scss/functions';
#import '../../../../../node_modules/bootstrap/scss/mixins';
#import '../../../../../node_modules/bootstrap/scss/variables';
#import '../../../../../node_modules/bootstrap/scss/_tables.scss';
table {
#extend .table;
text-align: center;
display: block;
max-width: -moz-fit-content;
max-width: 80%;
margin: 0 auto;
overflow-x: auto;
}
table,
tr,
td,
tbody {
border: none !important;
text-align: center !important;
}
#media only screen and (max-width: 991px) {
td,
tr {
display: block;
border: none
}
tr {
width: 100%;
border-bottom: 1px solid;
}
tr:nth-child(even)>td {
position: relative;
line-height: 22px;
}
td {
position: relative;
}
td:before {
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
color: #000;
font-weight: bold;
text-align: left;
}
}
<table border="1" style="width: 98.4261%; height: 292px;">
<tbody>
<tr>
<td>
<h3>Header</h3>
</td>
<td>
<h3>Header</h3>
</td>
<td>
<h3>Header</h3>
</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
The issue is that from the CMS the table comes as is. I am able to get the <tr></tr> stacked on top of each other which is just how a table works. So, when I am on mobile screens how could I get the first <tr></tr> <td></td> to act as a header for the columns? The CMS regular implementation of the table doesn't give headers. And I don't want users editing the source code for tables inside the WYSIWYG. I can change the td under the media query to position: absolute; but then would have to give fixed positions to align it for the headers.
The behavior I am trying to get would be:
Header
content
Header
content
Header
content
Trying to make my website responsive and want to specify #media queries for mobile phones.
I have set a wrapper on my full body on each site to centre the content.
I set a new wrapper in #media but want to move the table a little more to the left. Nothing seems to move the table though. Tried setting margin left/right and different positioning. What else could I try?
Full CSS for my #media query:
body {
background-color: #d5e6b3;
font-family: 'Raleway';
font-weight: 700;
color: #000;
background-image: url(../img/backgroundt.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.wrapper {
margin: 0 auto;
width: 1200px;
}
thead tr {
background-color: #a0d93f;
}
td {
padding: 12px 15px;
}
tbody tr:first-child {
background-color: #707fe0;
}
tbody tr:nth-last-of-type(even) {
background-color: #949feb;
}
tbody tr:last-child {
background-color: #707fe0;
}
#media(max-width: 500px) {
html,
body {
overflow-x: hidden;
}
body {
position: relative
}
.wrapper {
width: 200px;
}
.table {
margin-right: 50px;
}
}
<div class="wrapper">
<h1>About me</h1>
<table>
<thead>
<tr>
<th>Skills</th>
<th>Years of Experience</th>
<th>Levels of Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>1</td>
<td>Beginner</td>
</tr>
<tr>
<td>CSS</td>
<td>1</td>
<td>Beginner</td>
</tr>
<tr>
<td>JavaScript</td>
<td>1</td>
<td>Beginner</td>
</tbody>
</table><br>
<br>
I assume your table is 0 margin and there is no spacing on left, try to add in negative margin:
table {
margin: -5px
}
Found the answer to this.
The table did not align correctly with various px of left-margin or right-margin, neither did with margin-left: auto and margin-right: auto or padding on the left or right. However, using flex and flex-wrap to align the table head with the table body worked and centred the table for mobile devices.
The change can be seen when opening it with Web Dev tools on devices with max-width: 500px.
body {
background-color: #d5e6b3;
font-family: 'Raleway';
font-weight: 700;
color: #000;
background-image: url(../img/backgroundt.png);
background-size: cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
.wrapper {
margin: 0 auto;
width: 1200px;
}
thead tr {
background-color: #a0d93f;
}
td {
padding: 12px 15px;
}
tbody tr:first-child {
background-color: #707fe0;
}
tbody tr:nth-last-of-type(even) {
background-color: #949feb;
}
tbody tr:last-child {
background-color: #707fe0;
}
#media(max-width: 500px) {
html, body {
overflow-x: hidden;
}
body {
position: relative
}
.wrapper {
width: 200px;
}
.table {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
<body>
<div class="wrapper">
<h1>About me</h1>
<table>
<thead>
<tr>
<th>Skills</th>
<th>Years of Experience</th>
<th>Levels of Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>1</td>
<td>Beginner</td>
</tr>
<tr>
<td>CSS</td>
<td>1</td>
<td>Beginner</td>
</tr>
<tr>
<td>JavaScript</td>
<td>1</td>
<td>Beginner</td>
</tbody>
</table><br>
<br>
</body>
</html>
I am currently coding an accessibility page, but I am visually impaired. I've been advised that the table on this page:
http://www.accessibilityagent.com/legal/
is overlapping the adjacent content. Below is the CSS code being used. Could someone please help adjust this code to not overlap the page in the link above:
<div>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d
}
table.center {
margin-left:auto;
margin-right:auto;
}
body {
text-align:center;
}
table {
width: 50%;
}
table, th, td {
border: 20px solid black;
margin: auto;
padding: 5px;
}
td.wrappable,
table.data_table td.wrappable {
white-space: normal;
}
</style>
Try setting this CSS for the table:
table-layout: fixed;
width: 100%;
word-wrap: break-word;
you need to fit the table, so set table-layout:fixed , now you need to have it fit as large as possible so change width to 100% in table, then you need to fit the links in the cell, so break the words, using word-wrap:break-word in .center a
body {
background-color: #d8da3d;
color: purple;
}
table.center {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: 100%;
}
table,
th,
td {
border: 20px solid black;
padding: 5px;
}
.center a {
display: block;
word-wrap: break-word;
}
<table class="center">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Plaintiff</th>
<th scope="col">Defendant</th>
<th scope="col">Link to More Info</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">2015</td>
<td>US DOJ</td>
<td>YAKIMA COUNTY</td>
<td>http://www.ada.gov/yakima…
</td>
</tr>
</tbody>
</table>
I would like to build my website with responsive design concept. but I already tried margin: 0 auto and text-align: center. Both can't be help to center the table. I already try to disable some style that may affect the element such as right: 30px/ float: right in the chrome developer tool. but I still can't find the reason.
My website is on http://php-kkhchan.rhcloud.com
I would like to center the table which is on the top. All my responsive design setting is depend on CSS.
#media screen and (max-width: 980px) {
#searchBox, #tab, #weaExp, #weaAud, .desktop, svg {
display: none;
}
#tblhead {
float: left;
right: auto; //it is to override the style from normal view
margin-left: 30px; //since I am unable to set it to center. I now only to set it align to left.
}
}
The below is part of my html code:
<body text="#000000">
<table id="tblhead"><TR>
<TD style="width:145px;"><?php include("login.php") ?></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><a id="fb_qr" href="lib/qr.htm"><span id="myQR" class="myButton" tabindex="4">QR</span></a></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><a id="fb_map" href="lib/map.htm"><span id="myMap" class="myButton" tabindex="4">Map</span></a></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><a id="fb_mo" href="/mobile/index.php"><span id="ver" class="myButton" tabindex="4">Mobile</span></a></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><span id='weaBox'><p id='weaTmp'></p></span></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><article id="clkBox"><span id="clkText" onClick="clkChgColor();"></span></article></TD>
</TR></table>
by the way, I tried to add the below statement so that the screen layout like a mobile. but I wonder why the result is that the zoom will be very high. 1/3 of content was exceed the boundary and can't be view.
<meta name="viewport" content="width=device-width, initial-scale=1">
The #tblhead element uses position: fixed, so you can't center it using margin: auto. You can use this trick to center it:
#media screen and (max-width: 980px) {
#tblhead {
right: auto;
left: 50%; /** left should 50% of parent - body because of fixed **/
transform: translateX(-50%); /** move it back -50% of element itself **/
}
}
I have changed the css properties of the #tabs div.
#tabs {
background: none !important;
overflow: hidden;
border-style: none;
width: 900px;
/* margin-left: 10px; */
margin-left: 25%;
/* position: fixed; */
top: 10%;}
Hope it helps. Thanks.
Try using a combination of margin-left and calc:
If #tblhead width is 900px
margin-left: calc(50% - 450px)
By using half of the width of #tblhead's container and subtracting half the width of #tblhead, #tblhead will always be horizontally centered. When using calc it's important to remember to leave space around the minus - (or plus +, asterisk *, etc).
Ex. Do this: calc(50% / 2), do not do this: calc(50%/2).
SNIPPET
html {
width: 100%;
height: 100%;
font: 400 16px/1.45 'Verdana';
box-sizing: border-box;
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: inherit;
padding: inherit;
}
body {
width: 100%;
height: 100%;
background: #222;
color: #ddd;
position: relative;
}
.box {
width: 100vw;
height: 100vh;
position: relative;
padding: 2em;
}
#tblhead {
table-layout: fixed;
width: 900px;
border: 1px solid #ccc;
border-collapse: collapse;
margin: 20px 0;
/* This is an important rule */
margin-left: calc(50% - 450px);
}
th {
width: 32%;
height: 15px;
border: 2px solid #eee;
}
td {
height: 20px;
border: 2px inset #bbb;
}
#media screen and (max-width: 980px) {
#tblhead {
width: 520px;
/* This is an important rule */
margin-left: calc(50% - 260px);
}
}
<!doctype html>
<html>
<head>
<meta char="utf-8">
</head>
<body>
<section class="box">
<table id="tblhead">
<thead>
<tr>
<th>HEAD</th>
<th>HEAD</th>
<th>HEAD</th>
</tr>
</thead>
<tbody>
<tr>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
</tr>
<tr>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
</tr>
<tr>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
</tr>
<tr>
<td>DATA</td>
<td>DATA</td>
<td>DATA</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
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).