I have this styles:
.ant-table-tbody > tr > td {
padding: 8px 0 !important;
height: 48px;
}
.ant-table-tbody > tr:last-child > td {
padding: 8px 0 !important;
height: 48px;
border-bottom: none;
}
The last definition is almost the sam except that I'm setting `border-bottom: none``
How could I write that in one single class?
I tried something like:
.ant-table-tbody > tr > td {
padding: 8px 0 !important;
height: 48px;
&.tr:last-child {
border-bottom: 1px red solid;
}
}
but it's not working
You need to just correct the format
.ant-table-tbody {
> tr > td {
height: 48px;
padding: 8px 0 !important;
}
> tr:last-child > td {
border-bottom: 1px red solid;
}
}
Related
I have been trying for a few weeks and I tried multiple solutions I found here however the header scroll down and doesn't stick to the top. I do have position sticky and top: 0
I have read somewhere that overflow auto or hidden cause the table to scroll. but when I remove that my table doesn't scroll at all. I still want my table to scroll just not the header
Here is my CSS
.common-main-table {
max-height: 60rem !important;
overflow-y: scroll;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
table {
table-layout: auto;
margin-bottom: 0px !important;
border-collapse: separate;
border-spacing: 0;
width: 100%;
thead {
background: var(--table-main-heading-bg);
background: red;
text-align: start;
th {
position: absolute;
border-bottom-width: 1px !important;
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
tr th {
vertical-align: middle;
font-size: 17px;
font-weight: 700;
line-height: 18px;
color: var(--table-header-text) !important;
padding-top: 15px;
padding-bottom: 15px;
}
}
thead tr th:first-child {
padding-left: 30px;
}
thead tr th:last-child {
padding-right: 30px;
}
tbody {
background-color: var(--content-bg-color);
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
tr td {
vertical-align: middle;
font-size: 16px;
font-weight: 500;
line-height: 18px;
color: var(--table-main-text);
text-align: start;
}
}
tbody tr:hover {
background-color: var(--table-main-heading-bg);
}
tbody tr:last-child td {
border-bottom: 0px solid white !important;
}
tbody tr td:first-child {
padding-left: 30px;
}
tbody tr td:last-child {
padding-right: 30px;
}
tr th,
tr td {
border-right: 0px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
// &:nth-child(2n + 2) {
// border-right: 1px solid rgba(0, 0, 0, 0.1);
// }
}
}
table th {
border-top: 1px solid var(--border-color);
border-bottom: 1px solid;
border-right: 1px solid;
}
table td {
border-top: 0px solid;
border-bottom: 1px solid;
border-right: 1px solid;
}
}
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 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 (#).