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.
Related
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;
}
}
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'm trying to get a simple DataTable grid to render, but I'm getting an odd behavior. The column headers all look crammed over the 1st column.
I know it is because of some styling being applied to the class workspace-table because when I delete all styles related to that class the problem goes away. (I inhierited the styles, and am not very css literate).
Could someone tell me which style is breaking this? I have tried removing individual classes or styles but I'm not seeing what the issue is.
fiddle!
styles:
.workspace-table{
width: 80%;
margin-left: 20px;
border: 2px solid #C0C0C0;
width: 80%;
font-size: 11px;
}
.workspace-table .column-resize-icon{
float: right;
color: gray;
margin-right: -4px;
}
.workspace-table .table-desc-width{
width: 288px !important;
}
.workspace-table .table-dollar-format{
float: right;
padding-right: 10px;
}
.workspace-table thead/*.headerText*/{
color: white;
display: inline;
float: left;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 5px;
text-align: left !important;
text-decoration: underline;
}
.workspace-table tr {
border: 2px solid #C0C0C0;
}
.workspace-table th {
border-right: 2px solid;
background: #969696;
}
.workspace-table th .fa-sort{
color: grey;
}
.workspace-table th .fa-sort-up{
color: white;
}
.workspace-table th .fa-sort-down{
color: white;
}
.workspace-table .border-right .fa{
display: table-cell !important;
}
.workspace-table .border-right{
border-right: 2px solid white;
}
.workspace-table > thead > tr > th, .workspace-table > tbody > tr > th,
.workspace-table > tfoot > tr > th, .workspace-table > thead > tr > td,
.workspace-table > tbody > tr > td, .workspace-table > tfoot > tr > td {
padding: 5px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.workspace-table .negative {
color: red;
}
Thanks in advance!
I removed display:inliine and float:left from .workspace-table thead.
It looks like someone commented out part of that CSS selector, which maybe wasn't intended for the thead element itself, but maybe one of it's children?
http://jsfiddle.net/S9QXY/
.workspace-table thead/*.headerText*/{
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 5px;
text-align: left !important;
text-decoration: underline;
}
float kills any display.
Do not float your table elements and it will render fine.
jsfiddle.net/EX8LZ/18/
as said , do not either modify display values, unless you have good reason :)
Take out the display: inline and the float:left from your thead rule:
.workspace-table thead/*.headerText*/{
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 5px;
text-align: left !important;
text-decoration: underline;
}
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); }
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 (#).