I'm styling 2 tables, one for desktop/tablet and one for mobile.
My problem lies that depending what table i define first, is the one that borrows some of the styles from other table.
css:
table.table-payments{
border-collapse: collapse;
width: 100%;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
border-radius:5px;
box-shadow: var(--box-shadow-type-2);
}
table.table-payments > tr, thead, td, th {
padding:5px 15px;
text-align: left;
border-bottom: 1px solid var(--brand-light-gray-2);
border-radius: 5px;
font-size: var(--text-size);
height: 60px;
}
table.payments-mobile > tr, td, th{
text-align: left;
height: auto;
border: none;
}
table.payments-mobile > tbody{
background-color: var(--brand-white);
margin:5px 0;
border-radius: 4px;
box-shadow: var(--box-shadow-type-2);
}
image showing chrome style inspector
You're defining styles for elements generically in your css. You should be defining them more specifically, declaring the specific table for each element. So instead of:
table.payments-mobile > tr,
td,
th {
text-align: left;
height: auto;
border: none;
}
You should do:
table.payments-mobile > tr,
table.payments-mobile > td,
table.payments-mobile > th {
text-align: left;
height: auto;
border: none;
}
Related
Scenario :
I have two tables that are next to each other.
Todo :
I would like to know how to move the right table down when the window
is resized. The table should be able to resize with the table also.
It would be great if someone could help me out with the css.
Click here for link to codepen
.leftContainer {
width:50%;
position:fixed;
top:45%;
//display:inline-flex;
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border:none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
td {
padding: 20px 10px 20px 10px;
}
}
}
.rightContainer {
max-width: 50vw;
position:fixed;
//float:right;
top:45%;
right:5%;
display:flex;
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border:none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
td {
padding: 10px;
}
}
}
Problem is that both the containers are having fixed position. So if both containers can be given relative position in your case, then with flex box we can achieve the following.
Approach :
Provide display flex to body (the container of both the divs)
Allow flex-wrap so that the other div can be adjusted accordingly by getting below the first div if enough space is not present.
Let me know in comments, if its not helpful. See in full page mode
html, body {
width: 100%;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-wrap: wrap;
}
.leftContainer {
border: 1px solid black;
width:50%;
position:relative;
}
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border:none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
td {
padding: 20px 10px 20px 10px;
}
}
}
.rightContainer {
border: 1px black solid;
max-width: 50vw;
position:leative;
flex:wrap;
//float:right;
top:45%;
right:5%;
display:flex;
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border:none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
td {
padding: 10px;
}
}
}
.unreadMsgDiv{
height:18px;
width:18px !important;
border-radius:10px;
background-color:#FFA200;
display:inline-block !important;
font-size:13px;
text-align:center;
vertical-align: top;
margin-left: 15px;
color: black;
border: 1px solid #FFA200;
}
.beforeRead {
background-color: #FFA200;
padding: 0px 5px 0px 5px;
white-space: nowrap;
}
.afterRead {
background-color: #BFBFBF;
padding: 0px 5px 0px 5px;
white-space: nowrap;
}
.status {
background-color:white;
border: 1.2px solid #AEAEAE;
width:100px !important;
height:100px !important;
text-align: center;
text-decoration:none;
}
.statusTop {
margin: 20px 0px 5px 0px;
font-size: 30px;
display: block;
}
.statusBottom {
font-size: 12px;
}
.status:hover {
background-color:#002559;
color: white;
cursor: pointer;
}
<div class="leftContainer">
<table>
<thead>
<th colspan="4" style="text-align:left">Overview</th>
</thead>
<tbody>
<tr>
<td><div class="status"><span class="statusTop">10</span><span class="statusBottom" >Total cases</span></div></td>
<td><div class="status"><span class="statusTop">5</span><span class="statusBottom"><router-link style="text-decoration:none; color:black;" :to="{ name: 'Applications', params: { appType: 'pending', test: 'testinggg' }}">PENDING</router-link></span></div></td>
<td><div class="status"><span class="statusTop">3</span><span class="statusBottom">SUCCESSFUL</span></div></td>
<td><div class="status"><span class="statusTop">2</span><span class="statusBottom">REJECTED</span></div></td>
</tr>
</tbody>
</table>
</div>
<div class="rightContainer">
<table>
<thead>
<th colspan="3" style="text-align:left">Updates<div class="unreadMsgDiv">unreadMsg</div></th>
</thead>
<tbody>
<tr>
<td style="font-style:italic; font-size:13px; padding-bottom: 15px;" colspan="3">10 new updates since last login on...</td>
</tr>
<tr>
<td><span>30 Sept</span></td>
<td style="white-space: nowrap;">Ref. 1234454</td>
<td>Supervisor has approved the details. Please do check.</td>
</tr>
</tbody>
</table>
</div>
.leftContainer, .rightContainer {
display: flex;
flex-flow: row wrap;
flex-basis: auto;
max-width: 50%;
align-content: baseline;
justify-content: flex-start;
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px 20px 10px 20px;
}
td {
border: none;
}
thead {
background-color: #002559;
color: white
}
tbody {
background-color: #F2F2F2;
}
}
.leftContainer {
td {
padding: 20px 10px 20px 10px;
}
}
.rightContainer {
td {
padding: 10px;
}
}
Here's my css properties for a table. I want to fix the width of a certain column and hide the overflow. I tried on all the columns but i can't seem to make it work.
.celltable2 table {
table-layout:fixed;
font-family: Helvetica, Arial, sans-serif;
width: 640px;
border-collapse:
collapse; border-spacing: 0;
}
table.celltable2 td, th {
border: 1px solid transparent;
width: 30px;
height: 30px;
transition: all 0.3s;
overflow: hidden;
}
table.celltable2 td {
text-align:center;
vertical-align:middle;
}
Is there something i might be missing?. I tried defining colgroup and colspan but no success.
The problem is with your this css
table.celltable2 td, th {
border: 1px solid transparent;
width: 30px;
height: 30px;
transition: all 0.3s;
overflow: hidden;
}
In this you have targeted the width of <td> but not the <th> as after , you need to define like this table.celltable2 th instead of just th.
This is correct
table.celltable2 td, table.celltable2 th {
border: 1px solid transparent;
width: 30px;
height: 30px;
transition: all 0.3s;
overflow: hidden;
}
I've created a responsive table CSS and I want a specific CSS to the scroll bar of the table.
But, when inserting this code, the browser scroll bar also changes.
How to specifically use this design to my table?
body {
padding:1.5em;
background: #f5f5f5
}
table {
border: 1px #a39485 solid;
font-size: .9em;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,.25);
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-radius: 5px;
overflow: hidden;
}
th {
text-align: center;
}
thead {
font-weight: bold;
color: #fff;
background: #0088CC;
}
td, th {
padding: 1em .5em;
vertical-align: middle;
}
td {
border-bottom: 1px solid rgba(0,0,0,.1);
background: #fff;
}
a {
color: #73685d;
}
#media all and (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
text-align: right;
}
table {
position: relative;
padding-bottom: 0;
border: none;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
thead {
float: left;
white-space: nowrap;
}
tbody {
overflow-x: auto;
overflow-y: hidden;
position: relative;
white-space: nowrap;
}
tr {
display: inline-block;
vertical-align: top;
}
th {
border-bottom: 1px solid #a39485;
}
td {
border-bottom: 1px solid #e5e5e5;
}
}
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Please help.
You should be able to target the table scrollbar specifically just like any other css element by putting table before the scorll bar selector. So you could do:
table::-webkit-scrollbar{
/*Your styles here*/
}
table::-webkit-scrollbar-thumb{
/*Your styles here*/
}
table::-webkit-scrollbar-thumb:window-inactive{
/*Your styles here*/
}
Proof of concept here: http://codepen.io/supah_frank/pen/JooNKx
EDIT: Additionally, I've noticed a few weird quirks while playing around with this in chrome (Don't know if it affects other browsers).
First, the css for the scroll bars seems to cache, so make sure to do a hard refresh (ctrl + F5) after changing the css.
Second, even if you are not styling it, you need to target and apply some style to {your element}::-webkit-scrollbar before making any other changes to the scroll bar for an element (I found display: block works if you don't want to really make any changes). If you don't target it, none of the other css on the scroll bar will work for some odd reason.
I have a table within a table and there are these phantom borders. For the life of me I have tried so many things to kill these extra spaces and I do not know how to get rid of them. Check out the jsfiddle
body{
background: #ddd;
}
.outterTbl{
border-collapse: collapse;
border-spacing: 0px;
background: green;
}
.outterTbl th{
background: black;
color: white;
}
.outterTbl td{
margin: 0px;
border-spacing: 0px;
border: none;
}
.innerTbl{
border-collapse: collapse;
border-spacing: 0px;
text-align: center;
}
.innerTbl th{
background: #3399cc;
color: white;
}
.innerTbl tr:nth-child(odd) {
background: white;
}
.innerTbl tr:nth-child(even){
background: #9ccde5;
}
adding
padding: 0px;
to the outertable td does the trick
jsfiddle
I have a table that gets loaded from a text file. The table is contained within a container div. I've styled the table, but when the table has too many columns for the width of the container div, the content overflows and is now scroll-able. This is not a problem, however, from the point where the overflow occurs, the styling for the table does not apply anymore.
Please have a look at the image:
The styling for this table is below:
table.static {
width: 100%;
margin-bottom: 0!important;
margin-top: 0!important;
}
table.static thead {
background: #D0D6DA;
border-bottom: 1px solid #aaa;
}
table.static thead tr th {
border-left: none;
border-right: none;
line-height: 30px;
padding: 0 10px;
text-align: left;
color: #333;
font-weight: 400;
text-shadow: 0 1px 0 #fff;
}
table.static tbody tr td {
line-height: 25px;
padding: 0 10px;
border: 0 solid #999;
}
table.static tbody tr td {
border-bottom: 1px solid #E1E5E7;
}
table.static tbody tr:last-child td {
border-bottom: 0;
}
table.static tbody tr.even td {
background-color: #EDF1F3;
border-bottom: 1px solid #D8DCDE;
}
table.static tbody tr td input,
table.static tbody tr td button {
margin: 10px 0;
}
Can anyone please explain why this is happening, and what I can do to fix it? Thank you
Try this
table.static {
min-width: 100%;
margin-bottom: 0!important;
margin-top: 0!important;
}