I have tables styled as such:
table { width: 100%; border: 0; margin-bottom: 2em; }
table thead th
{
font-size: 13px;
font-weight: bold;
text-align: left;
padding: 10px;
background-color: #263849 !important;
color: #FFF;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
table td { vertical-align: top; }
table tbody tr td { background: #f4f4f4; border-bottom: 1px solid #D5D5D5;
border-top: 1px solid white; }
table th { padding: 10px 0; }
table tbody td { padding: 10px; }
table tr.even td { background: #F9F9F9; }
tr:nth-child(odd) { background-color:#F9F9F9; }
tr:nth-child(even) { background-color:#FFF; }
Now on the same page I want another table, with different style.
So that table I say call is table class="ver2"
What and how do I style this different table ? Its starting to do my head in.
You can set specific styles to the second table by targeting it with your CSS:
table.ver2 {/*whatever your declarations are...*/}
table.ver2 th {/*declarations*/}
etc...
Since you've decided to use a class, you need to use the period symbol for your CSS rules. If you chose to use the 'id' attribute, you'd replace the period with the pound sign (#).
Related
Hello guys I have this code :
.fc-list-table > tbody {
display: block;
border-color: #ddd;
padding: 25px;
.fc-list-item {
display: grid;
padding: 15px 15px 15px 5px;
cursor: pointer;
border-bottom: 1px solid #000;
}
.fc-list-item:last-child {
border-bottom: none;
}
}
But not working as expected, because I want to add border to all items except the item that is before item with class fc-list-heading. Have you an idea ? I put an image where I show which items shuld contain border
Compare your code with this, and find out what you did wrong.
.fc-list-table > tbody {
display: block;
border-color: #ddd;
padding: 25px;
}
.fc-list-item {
display: grid;
padding: 15px 15px 15px 5px;
cursor: pointer;
border-bottom: 1px solid #000;
}
.fc-list-item:last-child {
border-bottom: none;
}
I would like to replicate the same design as in this screenshot:
I have been able to replicate some of this design styling the vuetify data table with the following CSS:
.v-data-table {
#extend .elevation-0;
.v-data-table__wrapper {
table {
td,
th {
padding-left: 16px !important;
min-width: 170px !important;
border: 1px solid #e8e8e8 !important;
border-bottom: none !important;
font: 14px/40px !important;
text-align: left !important;
}
td {
color: #666 !important;
}
tr {
display: block !important;
}
th {
color: #333 !important;
}
tbody {
tr {
#include radius(xl);
#include elevation(4, true);
margin: 20px 5px;
background-color: #fbfbfb !important;
cursor: pointer !important;
}
}
thead.v-data-table-header tr {
th {
color: #818087 !important;
box-shadow: none !important;
border: none !important;
border-bottom: none !important;
}
}
tbody tr td {
border: none !important;
height: 65px;
}
}
}
}
The only problem I'm facing is that some of the rows are not alligned with the values of each cell:
As you can see the current table doesn't have the Plans header alligned with it's values. If the usere have more than one activity group the cell takes up too much space.
You can check out a minimum reproducible problem here: https://codepen.io/teresakk/pen/MWyXaWv
I have solved the problem with the help from another answer on stackoverflow:
(https://stackoverflow.com/a/16971333/4581336)
table {
border-collapse: separate;
border-spacing: 0 10px;
margin-top: -10px; /* correct offset on first border spacing if desired */
}
th {
background-color: map-get($grey, 'lighten-5') !important;
border: none !important;
box-shadow: none !important;
}
td {
border: solid 1px transparent;
border-style: solid none;
padding: 20px;
background-color: map-get($shades, 'white');
height: 60px !important;
}
td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
We have a generic table element that is predefined in WordPress. I would like to define a class name to a table element and have it use the custom css.
Does anyone know what I might be doing wrong? We are using a CDN, which I can see the .cookie_table class inside the minified style.css.
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
border-radius: 0; }
thead,
tbody,
tfoot {
border: 1px solid #f1f1f1;
background-color: #fefefe; }
caption {
padding: 0.5rem 0.625rem 0.625rem;
font-weight: 700; }
thead {
background: #f8f8f8;
color: #8E908F; }
tfoot {
background: #f1f1f1;
color: #8E908F; }
thead tr,
tfoot tr {
background: transparent; }
thead th,
thead td,
tfoot th,
tfoot td {
padding: 0.5rem 0.625rem 0.625rem;
font-weight: 700;
text-align: left; }
tbody th,
tbody td {
padding: 0.5rem 0.625rem 0.625rem; }
tbody tr:nth-child(even) {
border-bottom: 0;
background-color: #f1f1f1; }
table.unstriped tbody {
background-color: #fefefe; }
table.unstriped tbody tr {
border-bottom: 0;
border-bottom: 1px solid #f1f1f1;
background-color: #fefefe; }
Table class:
.cookie_table {
table {
width: auto;
}
}
Your table has the classs .cookie_table, so the selector has to be table.cookie_table { ... } or just .cookie_table { ... } alone (less specific), but not .cookie_table as child of table like in your code (which BTW only would work at all if you use LESS or SASS)
I would recommend either using table.cookie_table in the css or changing the class of table to an ID if possible.
I am trying to create a transparent table using the Foundation framework. I achived this without the framework but it seems i just can't using it.Any sugestions would be great.
table {
text-align: center;
}
table thead th{
text-align: center;
}
tbody tr th{
font-weight: normal;
}
th{
background-color: rgba(251,169,17,0.5);
}
td{
vertical-align: top;
height: 10em;
outline: 3px solid #e3e3e3;
/*border: 1px solid rgba(251,169,17,.5);*/
background-color: rgba(0,0,0,0);
}
td:hover{
background-color: #CEE3F6;
}
In Foundation, the background colour is given to the thead and tbody elements. To override these, simply use the following:
table thead,
table tbody {
background: transparent;
}
I have custom CSS for my tablepress tables, but for one particular table I would like to include cell borders. When I try to add my custom CSS code to the extra CSS classes section for that table, it tells me it is invalid. Can you help?
The extra css is:
.tablepress td { border: 1px solid #DDDDDD; }
My custom CSS for all tables is
.tablepress { background-color: #CDCDCD; margin: 10px 0 15px 0; font-size: 11pt; width: 98%; text-align: left; }
.tablepress th { background-color: #E6EEEE; border: 1px solid
#FFFFFF; padding: 4px; }
.tablepress td { color: #3D3D3D; padding: 4px; background-color:
#FFFFFF; vertical-align: top; }
.tablepress .even td { background-color: #FFFFFF; }
.tablepress .odd td { background-color: #F0F0F6; }
.tablepress .header { background-image: url(http://lifeinthefastlane.com/wp-content/plugins/wp-table-reloaded/img/bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; }
.tablepress .headerSortUp { background-color: #8DBDD8; background-image: url(http://lifeinthefastlane.com/wp-content/plugins/wp-table-reloaded/img/asc.gif); }
.tablepress .headerSortDown { background-color: #8DBDD8; background-image: url(http://lifeinthefastlane.com/wp-content/plugins/wp-table-reloaded/img/desc.gif); }