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>
Related
I've tried everything from other similar questions and nothing is working but I can't get my th's and td's to fill the table width.
The table takes up 100% width of containing div.
Thead takes up 100%.
Tbody takes up 100%.
Tr's take up 100%.
But the 4 th and td columns will only take up about 50% width.
I've set them to 25% as I always thought 4 x 25% would add up to 100% but apparently not in CSS.
I've tried adding display block in different places and tried loads of other things but nothing works.
This is what i did:
.booktable {
width: 100%;
overflow-y: scroll;
height: 55vh;
display: inline-block;
}
.booktable thead {
width: 100%;
display: inline-block;
}
.booktable tbody {
width: 100%;
display: block;
}
.booktable tr{
width: 100%;
display: block;
}
.booktable th{
width: 25%;
color: grey;
padding: 1vh;
font-size: 2vh;
border-bottom: 1px solid grey;
font-weight: bold;
position: sticky;
top: 0;
background-color: white;
}
.booktable td{
width: 25%;
font-size: 2.5vh;
text-align: center;
padding: 2vh;
color: grey;
}
<table class="booktable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Group</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Cat</td>
<td>Group</td>
<td>Balance</td>
</tr>
</tbody>
</table>
Been trying display inline-blocks, blocks and position absolutes, relatives, table layouts, removing padding... nothing works.
Even doubling widths to 200% or 50% for td.
Didn't want to ask what must be a really simple answer and I have tried as much as I can but had to ask as I've been trying for hours!
Any help much appreciated.
You are overwriting all table specific display modes, so that's what's getting you in trouble try this:
.booktable {
width:100%;
overflow-y: scroll;
height: 55vh;
display: table;
}
.booktable thead {
width: 100%;
}
.booktable tbody {
width: 100%;
}
.booktable tr{
width: 100%;
}
.booktable th{
width: 25%;
color: grey;
padding: 1vh;
font-size: 2vh;
border-bottom: 1px solid grey;
font-weight: bold;
position: sticky;
top: 0;
background-color: white;
}
.booktable td{
width: 25%;
font-size: 2.5vh;
text-align: center;
padding: 2vh;
color: grey;
}
<table class="booktable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Group</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Cat</td>
<td>Group</td>
<td>Balance</td>
</tr>
</tbody>
</table>
You need to set table width to 100% then all th,td will adapt 25% of the total width.
Here is the working example:
.booktable {
width: 100%
}
.booktable th, .booktable td{
width: 25%;
color: grey;
padding: 1vh;
font-size: 2vh;
border-bottom: 1px solid grey;
font-weight: bold;
position: sticky;
top: 0;
background-color: white;
}
.booktable td{
width: 25%;
font-size: 2.5vh;
text-align: center;
padding: 2vh;
color: grey;
}
<table class="booktable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Group</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Cat</td>
<td>Group</td>
<td>Balance</td>
</tr>
</tbody>
</table>
I have this:
and want this (second column using less space):
Is there a way without introducing absolute values or fixed columns? I don't mind any other hacks like wrappers or invisible columns as long as the content sizes dynamically.
HTML
table {
border-collapse: collapse;
height: 100%;
background-color: blue;
white-space: nowrap;
}
.wrapper {
width: 40%;
font-family: avenir;
height: 100vh;
}
td > div {
color: white;
background-color: darkblue;
padding: 5px;
display: inline-block;
}
td {
padding: 0px;
border: 1px dotted white;
}
.w1px {
width: 1px;
}
.h-100 {
height: 100%;
}
<div class="wrapper">
<table>
<tr>
<td class="w1px"><div>Item1</div></td>
<td><div>Item2</div></td>
<td><div>Item3</div></td>
</tr>
<tr>
<td colspan="3"><div>Item Spanning All Three Above</div></td>
</tr>
<tr>
<td colspan="2"><div>Item Spanning Two</div></td>
</tr>
<tr class="h-100">
</tr>
</table>
</div>
To format these 2 tables I have a css sheet. The top table is a filter/sort selection. The second is a scrollable data table.
div#scrollTableContainer {
width: auto;
margin: 20px; /* just for presentation purposes */
border: 1px solid black;
}
#tHeadContainer {
background: #CC3600;
color: black;
font-weight: bold;
}
#tBodyContainer {
height: 750px;
overflow-y: scroll;
}
td:first-child {
min-width: 5%; /* EDIT */
max-width: 5%;
border-left:0;
}
td:first-child + td {
min-width: 4%;
max-width: 4%;
}
td:first-child + td + td {
min-width: 4%;
max-width: 4%;
}
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th bgcolor="<%=bgc0%>">USED</th>
<th bgcolor="<%=bgc0%>">STATUS</th>
</tr>
</table>
</div>
<div id="tBodyContainer">
<table border="1" align="center" id="tBody" class="TableData">
<td> stuff </td>
<td> More stuff </td>
</table>
</div>
</div>
Neither of the 2 tables are aligning column wise so that the Title/Header columns do not match the tables columns below. It also shows almost the same in chrome/IE, but firefox is a complete shamble.
Im at a loss to get this right guys, any help will be appreciated.
div#scrollTableContainer {
width: auto;
margin: 20px;
/* just for presentation purposes */
}
#tHeadContainer {
background: #CC3600;
color: black;
font-weight: bold;
}
#tBodyContainer {
height: 750px;
}
th:first-child, td:first-child {
min-width: 15%;
max-width: 15%;
width: 15%;
}
td:first-child+td {
min-width: 4%;
max-width: 4%;
}
td:first-child+td+td {
min-width: 4%;
max-width: 4%;
}
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th bgcolor="<%=bgc0%>">USED</th>
<th bgcolor="<%=bgc0%>">STATUS</th>
</tr>
</table>
</div>
<div id="tBodyContainer">
<table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
<td> stuff </td>
<td> More stuff </td>
</table>
</div>
</div>
You want to align the columns of both table vertically right?
If that is so, I have a solution for you
I have changed your css and u missed tr in second table.
https://jsfiddle.net/9ccwkoav/
div#scrollTableContainer {
width: auto;
margin: 20px; /* just for presentation purposes */
border: 1px solid black;
}
#tHeadContainer {
background: #CC3600;
color: black;
font-weight: bold;
}
#tHeadContainer th{
width:50%;
}
#tBodyContainer {
height: 750px;
overflow-y: auto;
}
.TableData{
width:100%;
}
.TableData td{
width:50%;
}
This should do the trick. Notice that there will be a little margin because of the scroll bar of the second table, but you can easily change it by adding a tab in the first array with the width of the scrollbar. Hope it will help
#scrollTableContainer {
width : 96%;
margin : auto;
border : 1px solid #ccc;
}
#tHeadContainer {
background-color : green;
width : 100%;
}
#tBodyContainer {
width : 100%;
height : 750px;
overflow-y : scroll;
}
#tHeadContainer table, #tBodyContainer table {
border-collapse : collapse;
width : 100%;
}
td, th {
border : 1px solid black;
}
tr {
width : 100%;
}
th:first-child, td:first-child {
min-width : 15%;
max-width : 15%;
width : 15%; /* Tweak this value to change the first column width */
}
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table>
<tr>
<th>USED</th>
<th>STATUS</th>
</tr>
</table>
</div>
<div id="tBodyContainer">
<table>
<tr>
<td>Stuff</td>
<td>Some other stuff</td>
</tr>
</table>
</div>
</div>
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>