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
Related
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 have the following code:
#superheader {
width: auto;
height: 100px;
position: relative;
}
#superheader p {
font-family: Sansation;
font-size: 50px;
}
#superheader table {
border: solid;
height: 100px;
}
#header {
height: 140px;
box-shadow: 0em 0.5em 0.5em grey;
position: relative;
background-color: #E6E6E6;
padding-left: 70px;
padding-right: 70px;
font-family: sans-serif;
}
.menuelement {
width: 100px;
height: 40px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
float: left;
position: relative;
}
.menuelement:hover {
background-color: dimgrey;
}
#header>a {
line-height: 2.5;
}
<div id="header">
<div id="superheader">
<div style="margin: auto; width: 630px;">
<table>
<tr>
<td><img src="images/memoji.png" width="100px" height="100px" alt="Icon"></td>
<td>
<p>A TITLE</p>
</td>
</tr>
</table>
</div>
</div>
<a href="template.html">
<div class="menuelement">Page1</div>
</a>
<a href="index.html">
<div class="menuelement">Page2</div>
</a>
<a href="not_found.html">
<div class="menuelement">Page3</div>
</a>
</div>
The table in this example should be 100px in height, however it won't get smaller than 170px.
Where is my mistake?
Well, actually you can't control height or width of the elements with display: table; because by default if their cells height or width is larger than the height or width of the element with display: table; the element will grow. So you need to control the dimension of the cells instead of the table itself.
In your particular case, there are two approaches to overcome this situation.
Controlling the cells: since you used p tag in your table and this tag has a default margin of 1em on top and bottom you can simply override it and because the inner cells are no longer larger than the table itself you can control its dimensions (As long as they do not smaller than cells). Also, keep in mind the font-size and line-height will make your cells bigger than usual, but if you want to keep them as it is, you should drop the default margin.
p {
font-family: Sansation;
font-size: 50px;
margin: 0;
}
table {
border: solid;
height: 100px;
}
<table>
<tr>
<td><img src="images/memoji.png" alt="Icon"></td>
<td>
<p>A TITLE</p>
</td>
</tr>
</table>
Using display: block;: You can simply override the display of the table and make it work as block but you still need to control the inner elements to do not override the table itself. Also, keep in mind you should control the width of the table also because block element by default will fill the available space.
p {
font-family: Sansation;
font-size: 50px;
margin: 0;
}
table {
border: solid;
height: 100px;
display: block;
}
<table>
<tr>
<td><img src="images/memoji.png" alt="Icon"></td>
<td>
<p>A TITLE</p>
</td>
</tr>
</table>
Add the border-spacing: 0px; to your table style to remove spaces between cells:
#superheader table{
border: solid;
height: 100px;
border-spacing: 0px;
}
and then remove white spaces inside cells:
td, td *{
display: table-cell;
margin: 0px;
padding: 0px;
}
I'm trying to make a table with only images in the table without any sort of padding or border (totally seamless) and can get vertical with no border/padding/spacing at all… however, the horizontal: there are gaps and spaces… no matter what I try… sorry I couldn't find an answer regarding this. Excuse the messy code, please!
table {
border-collapse: collapse;
vertical-align: top;
margin-left: auto;
margin-right: auto;
}
table.a {
table-layout: auto;
width: 1000px;
height: 600px;
margin-right: 100%;
margin-left: 0%;
}
td {
padding: 0px;
text-align: left;
}
img {
vertical-align: top;
padding: 0px;
}
tr.spaceUnder>td {
padding-bottom: 0px;
border: none;
padding: 0px;
}
<table class="a">
<tr class="spaceUnder">
<td>
<img src="mcu.jpg" alt="info">
</td>
<td><img src="fill1.jpg"></td>
</tr>
<tr class="spaceUnder">
<td><img src="fill2.jpg"></td>
<td><img src="mcu41.jpg"></td>
</tr>
<tr class="spaceUnder">
<td><img src="fill3.jpg"></td>
<td><img src="news.jpg"></td>
</tr>
</table>
you have already set the height and width of a class element of table class
Change the width and height to auto:
table.a {
table-layout: auto;
width: auto;
height: auto;
margin-right: 100%;
margin-left: 0%;
}
check :
https://jsfiddle.net/sugandhnikhil/q8m1n57h/1/
Use border and padding in td to get border and spacing
table td {
border: 1px solid;
padding: 5px;
background: #333;
}
For Bootstrap add class for table table-bordered
<table class="table-bordered"></div>
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>
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>