I have a simple nested table. Three columns - Name, Email,Contact. In the contact column, I have have two contact separated by a . This table gets stacked in the form of one row below the another in the mobile view.
Problem : Since the two contact numbers are separated by a break, in the mobile view it adds a huge space between the column headings. I just want to pick up "contact" heading in mobile(and not touch the numbers) and move it a little to reduce the space in between. Right now, whatever css I apply it moves the contact numbers along with it. Please suggest how can I do this ?
$(function() {
$(".fold-table tr.view").on("click", function() {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
$('.view, table.child').each(function() {
$('.view:even, table.child:even').addClass('odd');
$('.view:odd, table.child:odd').addClass('even');
});
.tableComponent table.parent {
font-family: 'Poppins';
font-size: 12px;
width: 60%;
border: none;
border-collapse: separate;
border-spacing: 0 2px;
}
.tableComponent table thead th {
border-bottom: 0;
border-top: 0;
}
.tableComponent table td,
th {
border-top: 0px;
}
table.fold-table>tbody>tr.view td,
table.fold-table>tbody>tr.view th {
cursor: pointer;
}
table.fold-table>tbody>tr.fold {
display: none;
}
table.fold-table>tbody>tr.fold.open {
display: table-row;
}
.odd {
background-color: #F2F2F2;
}
.even {
background-color: #F8F8F8
}
table.child {
font-family: 'Poppins';
font-size: 12px;
width: 100%;
margin-top: -0.1rem;
border-top: 2px solid #DBDBDB;
}
table.fold-table>tbody>tr.fold.open>td {
padding: 0;
}
#media all and (max-width: 500px) {
.tableComponent table.parent {
width: 90%;
margin-left: 5vw
}
.tableComponent thead {
display: none;
}
.tableComponent tr {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.tableComponent td::before {
content: attr(col);
font-weight: bold;
padding-right: 20px;
width: 40vw;
display: inline-block;
}
table.child {
margin-top: -0.5rem;
}
.contactInfo {
display: inline-block;
margin-left: -0.2rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tableComponent">
<table class="table fold-table parent" id="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Contact</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td col="Name">John</td>
<td col="Email">j#g.com</td>
<td col="Contact">
<span class="contactInfo">
35373726<br>
35373726
</span>
</td>
</tr>
<tr class="fold">
<td colspan="3">
<div class="fold-content">
<table class="child">
<tbody>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
In css, the inline elements doesn't take margins, so vertical alignment can be done like so
#media all and (max-width: 500px){
.tableComponent td::before {
vertical-align: top;
}
}
If you change the col="Contact" td into a flexbox, it will behave the way you want it at that screen size.
[col="Contact"] {
display: flex;
}
Related
I'm trying to make a responsive calendar where if I press a day it change its color and if I press two days it colors the two days (also that sums the days I click on a counter that is shown on screen) and like that consecutivly. Then if press again the day it will decolor and is substracted from the total of the sum.
This is what I have:
let day = document.getElementsByClassName('day');
for (i = 0; i < day.length; i++) {
if (day[i].classList.contains('day')) {
day[i].addEventListener("click", function OnClick() {
this.classList.add("vacacion");
this.classList.remove("day");
})
} else if (day[i].classList.contains('vacation')) {
day[i].addEventListener("click", function Click() {
this.classList.remove("vacacion");
this.classList.add("day");
})
}
}
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: rgb(65, 65, 65);
}
h1, td, th {
text-align: center;
}
h1 {
padding: 30px;
background-color: rgb(140, 161, 218);
color: white;
}
div#colors {
margin: 15px 20px;
display: grid;
grid-template-columns: 85px 100px 100px auto;
}
div#colors div.config {
width: 20px;
height: 12px;
float: left;
margin-right: 3px;
border-radius: 4px;
}
div#colors div.contador {
width: 110px;
justify-items: right;
font-weight: 900;
}
div#colors div.contador h6 {
font-weight: 600;
}
.festivos {
background-color: #7d6da1;
color: white;
}
.vacaciones {
background-color: #ad626e;
color: white;
}
.vacacion {
background-color: #ad626e;
color: white;
}
.ausencias {
background-color: #a77f13;
color: white;
}
div#colors h6 {
font-size: 0.8em;
font-weight: 500;
}
div#calendar {
margin: 15px auto;
display: grid;
grid-template-columns: auto auto auto;
column-gap: 30px;
row-gap: 30px;
justify-items: center;
justify-content: center;
}
table {
justify-self: center;
align-self: start;
}
caption {
background-color: rgb(140, 161, 218);
padding: 5px;
color: white;
font-weight: 900;
}
.finde {
background-color: rgb(230, 230, 230);
}
th {
padding: 0 7px 0 7px;
}
td {
padding: 3px 0 3px 0;
}
.day {
background-color: none;
}
#media only screen and (min-width: 1200px) {
div#calendar {
grid-template-columns: auto auto auto auto;
}
}
#media only screen and (max-width: 850px) {
div#calendar {
grid-template-columns: auto auto;
}
}
#media only screen and (max-width: 600px) {
div#calendar {
grid-template-columns: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="calendario.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>2023</h1>
<div id="colors">
<div>
<div class="festivos config"></div>
<h6>Festivos</h6>
</div>
<div>
<div class="vacaciones config"></div>
<h6>Vacaciones</h6>
</div>
<div>
<div class="ausencias config"></div>
<h6>Ausencias</h6>
</div>
<div class="contador"><h6>Días festivos:<span id="contador">#</span></h6></div>
</div>
<div id="calendar">
<!-- ENERO 2023 -->
<table>
<caption>ENERO</caption>
<thead>
<tr>
<th>Lu</th>
<th>Ma</th>
<th>Mi</th>
<th>Ju</th>
<th>Vi</th>
<th>Sa</th>
<th>Do</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="finde">1</td>
</tr>
<tr>
<td class="day">2</td>
<td class="day">3</td>
<td>4</td>
<td>5</td>
<td class="festivos day">6</td>
<td class="finde day">7</td>
<td class="finde">8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td class="finde">14</td>
<td class="finde">15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td class="festivos">20</td>
<td class="finde">21</td>
<td class="finde">22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td class="finde">28</td>
<td class="finde">29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script src="calendario.js"></script>
</body>
</html>
You almost got it right! The only thing you missed is the "unchecked" state where you have to remove the class vacation and add day back to it.
It is also worth mentioning that only the elements that have day class (1,2,6 and 7) at the time you are query the elements (document.getElementsByClassName('day')) will have the click handler registered because you query only those. This is also the reason why you never get to register click handler on vacation items since else if in loop will never be reached.
I added an extra class for selected elements so it is easier to count them so the counter could be updated appropriately - you could use day or vacation class ass well for this purpose.
let day = document.getElementsByClassName('day');
// get counter element
let counterEl = document.getElementById('contador');
let counter = 0;
for (i = 0; i < day.length; i++) {
if (day[i].classList.contains('day')) {
day[i].addEventListener('click', function click() {
// you have to add vacation if it is not already in classList
// and remove it if it is already there. You could check if
// classList contains vacation and then remove it, but toggle
// does that under the hood for you
this.classList.toggle('vacacion');
this.classList.toggle('day');
// adding additional selected class to know which ones are selected
this.classList.toggle('selected');
// if element has selected class then increase the counter,
// otherwise decrease it
if (this.classList.contains('selected')) {
counter += 1;
} else {
counter -= 1;
}
// update the counter
counterEl.innerText = counter;
});
// the statement below will NEVER execute, since the first condition
// will always be true because you query only the elements with
// classname "day" in line 1.
// ...
}
}
I need to make work filter based on last column. Last Column is Category and when I press in option>select I need to show just that one category and hide others, but for now when I click nothing happen and don't have idea why.
highlightRows = () => {
let oddRows = document.querySelectorAll('tbody > tr.show')
oddRows.forEach((row, index)=> {
if (index % 2 == 0) {
row.style.background = '#f1f1f1'
} else {
row.style.background = '#fff'
}
})
}
const filterOptions = () => {
const option = document.querySelector("#filter").value;
const selection = option.replace('&', '')
const rows = document.querySelectorAll("#body1 > tr");
console.log(rows.length);
rows.forEach(row => {
let td = row.querySelector("td:last-child");
let filter = td.innerText.replace('&', '');
if (filter === selection) {
row.className = 'show'
} else {
row.className = 'hidden'
}
});
highlightRows()
};
document.getElementById("filter").addEventListener("change", filterOptions);
table.vypis {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.vypis > caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.vypis > tr.vypis-riadok {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table.vypis th,
table.vypis td {
padding: .625em;
text-align: center;
}
table.vypis th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 800px) {
table.vypis {
border: 0;
}
table.vypis > caption {
font-size: 1.3em;
}
table.vypis > thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.vypis td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table.vypis td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table.vypis td:last-child {
border-bottom: 0;
}
}
<div class="table-filters">
<select id="filter">
<option disabled selected value="none">Categories</option>
<option>Home</option>
<option>Others</option>
<option>Hobby</option>
<option>Garden</option>
</select>
</div>
<table class="vypis">
<caption>Account</caption>
<thead>
<tr>
<th scope="col">Referencia</th>
<th scope="col">Dátum</th>
<th scope="col">Suma</th>
<th scope="col">Kategória</th>
</tr>
</thead>
<tbody class="body1">
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">[[kategoria]]</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">Garden</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">Home</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">Hobby</td>
</tr>
</tbody>
</table>
the problem is in your query for tbody you write #body1 so it will query element with ID body1 while in your html code, tbody is with class body1 not id
const rows = document.querySelectorAll("#body1 > tr"); // <--- will select element with id="body1"
your HTML code:
...
</thead>
<tbody class="body1"> <!--body is using attribute class -->
<tr class="vypis-riadok">
...
what you should do is use class query selector, change # into .
const rows = document.querySelectorAll(".body1 > tr"); // <--- will select element with class="body1"
after that your javascript code should be fine, now add css style for show and hidden class
.hidden{
display: none;
}
should be because I got defined select by ID
I want to have a table, such that if the width of the page decreases the columns of the table should be displayed one below the other.
You can use CSS display properties to alter the way the table behaves. In order to make the table cells sit one on top of the other, you need to create a media query which will set the table and each cell to be display: block at the break point that best suits your needs.
In the example below the table cells will wrap when the screen width shrinks to 500px.
Example
#media (max-width: 500px) {
table {
display: block;
border: solid 1px #f00;
}
table td {
display: block;
border: solid 1px #f00;
}
}
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Explanation
By default a table tag uses display: table and a table cell uses display: table-cell. By changing these properties we can alter the way the table is displayed.
For more information on display properties see this article:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
For more information on media queries see the following article:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Alright if i understand correctly you want something like this:
http://codepen.io/geoffyuen/pen/FCBEg
This Solution wil make your table responsive so it can do what you are trying to do(at leat i think i know what youre trying to do)
Just some example html code
<h1>RWD List to Table</h1>
<table class="rwd-table">
<tr>
<th>Movie Title</th>
<th>Genre</th>
<th>Year</th>
<th>Gross</th>
</tr>
<tr>
<td data-th="Movie Title">Star Wars</td>
<td data-th="Genre">Adventure, Sci-fi</td>
<td data-th="Year">1977</td>
<td data-th="Gross">$460,935,665</td>
</tr>
<tr>
<td data-th="Movie Title">Howard The Duck</td>
<td data-th="Genre">"Comedy"</td>
<td data-th="Year">1986</td>
<td data-th="Gross">$16,295,774</td>
</tr>
<tr>
<td data-th="Movie Title">American Graffiti</td>
<td data-th="Genre">Comedy, Drama</td>
<td data-th="Year">1973</td>
<td data-th="Gross">$115,000,000</td>
</tr>
</table>
Then we have our CSS
#import "compass/css3";
// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)
$breakpoint-alpha: 480px; // adjust to your needs
.rwd-table {
margin: 1em 0;
min-width: 300px; // adjust to your needs
tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
th {
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
}
td {
display: block;
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
font-weight: bold;
// optional stuff to make it look nicer
width: 6.5em; // magic number :( adjust according to your own content
display: inline-block;
// end options
#media (min-width: $breakpoint-alpha) {
display: none;
}
}
}
th, td {
text-align: left;
#media (min-width: $breakpoint-alpha) {
display: table-cell;
padding: .25em .5em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
// presentational styling
#import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
tr {
border-color: lighten(#34495E, 10%);
}
th, td {
margin: .5em 1em;
#media (min-width: $breakpoint-alpha) {
padding: 1em !important;
}
}
th, td:before {
color: #dd5;
}
}
Hope this helps you
I have this CSS table code:
.navgroups table#rightTable {
float: right;
width: 33%;
}
.navgroups table#leftTable {
float: left;
width: 33%;
}
.nvagroups td#centerTable {
margin: auto;
}
In the middle table I want to insert an image, but the problem is bigger then just 33% (image size).
Every single letter in the middle table lowers the left table from the bar.
I tried the display:inline and display:inline-block.
I will just put this as an answer and I don't think anyone can get much better then this with the information you provided.
HTML:
<table class="rightTable">
<tr>
<td></td>
</tr>
</table>
<table class="leftTable">
<tr>
<td></td>
</tr>
</table>
<table class="centerTable">
<tr>
<td>
<img src="http://www.greeningaustralia.org.au/images/global/gallery-image.jpg" />
</td>
</tr>
</table>
CSS:
.rightTable {
float: right;
width: 33%;
}
.leftTable {
float: left;
width: 33%;
}
.centerTable {
margin: auto;
width: 33%;
}
table {
outline: 1px solid;
}
img {
width: 100%;
}
This is 3 tables all 33.33% with an image that fits in the center one.
DEMO HERE
And in this demo below we have text in the other tables. Works fine.
DEMO HERE
Update:
Demo of using 1 table instead of 3.
DEMO HERE
Here is my idea. Something like this:
<style>
table {
width: 100%;
border: 1px #cccccc solid; /* for cells preview */
}
td.left, td.right {
width: 33.33%;
background-color: #f0f0f0; /* for cells preview */
}
td {
border: 1px #cccccc solid; /* for cells preview */
height: 400px;
padding: 0;
}
td.middle {
text-align: center;
}
td.middle img {
max-width: 100%;
max-height: 100%;
}
</style>
<table>
<tr>
<td class="left">
Left cell content
</td>
<td class="middle">
<img src="http://themify.me/demo/themes/pinshop/files/2012/12/man-in-suit2.jpg">
</td>
<td class="right">
Right cell content
</td>
</tr>
</table>
I need to highlight a row in a DataTables.js data table whenever it is inactive. I have some code set up in my Razor to label the <tr> with an id of "Inactive" and in my CSS I have the background color set accordingly. However, I can't get anything but the orignal styling to appear.
CSS
/*
* Table styles
*/
table.pretty {
width: 100%;
clear: both;
}
table.pretty td#Inactive {
padding: 5px;
border: 1px solid #fff;
background-color: #FB9090;
}
table.pretty td,
table.pretty th {
padding: 5px;
border: 1px solid #fff;
}
/* Header cells */
table.pretty thead th {
background: #6699FF; /* #66a9bd; */
color: white;
}
/* Body cells */
table.pretty tbody th {
text-align: left;
background: black; /*#91c5d4; */
color: white;
}
table.pretty tbody td {
background: white; /* #d5eaf0; */
}
table.pretty tbody tr.odd td {
background: #e8eef4; /*#bcd9e1; */
}
/* Footer cells */
table.pretty tfoot th {
background: #b0cc7f;
text-align: left;
}
table.pretty tfoot td {
background: #d7e1c5;
text-align: center;
font-weight: bold;
}
tr#Inactive
{
background-color: #FB9090;
}
HTML (Rendered)
<tr id=Inactive style="vertical-align:top;">
<td style="width:200px;">
Name
</td>
<td>
Fixed
</td>
<td style="width:50px;">
test
who's testing
I am
who's that eh?
me
</td>
<td style="width:50px;">
109161
</td>
<td style="text-align:center">
<img src="/Content/Images/attachment.png" height="20px;" width="20px;"/>
</td>
<td nowrap>
</td>
<td nowrap>
</td>
<td style="text-align:center; max-width: 50px;">
</td>
<td>
<img src="/Content/Images/Pencil-icon.png" alt="edit" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-view-list-text-icon.png" alt="details" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-edit-delete-icon.png" alt="delete" height="20px;" width="20px;"/>
</td>
</tr>
jQuery
$("#thetable").dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 100,
"oLanguage": {
"sSearch": "Filter results:"
}
});
If only one row is inactive at a time, I think you're looking for:
tr#Inactive td
{
background-color: #FB9090;
}