I am looking to indent content of table columns BUT NOT the content of the table heading row. I had found some code on another thread that solved the issue of needing to pad only certain columns, but this also pads the table heading row.
/* first column */
td:first-child {
padding-left: 20px;
}
/* second column */
td:first-child + td {
padding-left: 10px;
}
/* third columns */ {
td:first-child + td + td {
padding-left: 0;
}
Use a TH tag instead of a TD tag for your header row in your HTML.
Related
How can I override library classes, but only within a specific container that I've styled with my own class?
I think I am just not understanding how to format the right selector. Here's the background: I am not a CSS expert, but we lost ours, and now the Data Base Guy has to push through :) We use the MudBlazor library in server-side Blazor, but I think this is "just a CSS" question.
The library pre-defines certain styles, and we need to override them. For example, the library defines .mud-table-dense .mud-table-row .mud-table-cell, which, if I understand correctly, means applied to mud-table-cell when inside mud-table-row inside mud-table-dense. (I could look up the styles in their source, but as far as the project is concerned, these "base styles" are buried deep in the library, somewhere.)
The earlier code in our project just over-rode the styles in our own project.css like this:
.mud-table-dense .mud-table-row .mud-table-cell {
padding: 2px 0 0 2px;
padding-inline-end: 24px;
padding-inline-start: 24px;
}
Trouble is that doing so breaks some other scenarios where we want to use their default formats. Keep in mind that I can't change the styles attached to the <td> or <th> directly (at least in most cases), but I can wrap the whole generated output in a div or style one of the higher-level containers in the library with a class.
So, if I wrap the generated table in a "mycontainer" class, I thought I should be able to change the selector to:
.mycontainer .mud-table-dense .mud-table-row .mud-table-cell {
but, then the they don't seem to apply at all.
The .razor html looks like:
<div class="mycontainer">
<MudDataGrid>
<!--- Table details -->
</MudDataGrid>
</div>
So my question boils down to: Given generated content from a library that creates low level elements like that are styled with classes, how can I override those classes, but only within a specific container that I've styled with my own class?
I don't usually answer my own question, but in case this ever comes up in a search.
The question: Given generated content from a library that creates low level elements like that are styled with classes, how can I override those classes, but only within a specific container that I've styled with my own class?
The (very specific) answer for styling a table generated by MudBlazor's MudTable component:
tbody.mud-table-body tr.mud-table-row > td.elk-table-90-l,
thead.mud-table-head tr.mud-table-row > th.elk-table-90-l,
col.elk-table-90-l {
width: 90px;
overflow: hidden;
text-overflow: clip;
padding: 0;
padding-inline-end: 6px;
padding-inline-start: 0px;
text-align: left;
}
tbody.mud-table-body tr.mud-table-row > td.elk-table-dec-r,
thead.mud-table-head tr.mud-table-row > th.elk-table-dec-r,
col.elk-table-dec-r {
width: 120px;
overflow: hidden;
text-overflow: clip;
padding: 0 35px 0 0 !important;
/* padding-inline-end: 30px;
padding-inline-start: 0px;*/
text-align: right;
}
thead.mud-table-head tr.mud-table-row > th.elk-table-dec-r.sort {
/* Take back out some padding in the header to allow for the hidden sort-icon*/
padding: 0 12px 0 0 !important;
}
.elks-table div.mud-table-container table tbody tr,
.elks-table div.mud-table-container table tbody tr *
.elks-table div.mud-table-container table tbody tr td,
.elks-table div.mud-table-container table tbody tr th * {
overflow-y: hidden;
vertical-align: middle;
height: 30px;
padding: 0;
}
.elks-table tbody tr.mud-table-row td.mud-table-cell ,
.elks-table thead tr.mud-table-row th.mud-table-cell {
padding: 0 12px 0 0 ;
}
.elks-table table,
.elks-table .mud-table-root {
table-layout: fixed;
}
I applied:
elks-table to <MudTable> to used fixed table layout and to lock the row height
elks-table-90-l to <col> in <ColGroup> to set the column width
elks-table-90-l to <MudTh> and <MudTd> to set alignment and such
I could break the settings for the TH and the TD into separate rules, but I preferred keeping them together and using one style for all three places in the markup (col, mudth, mudtd).
It might be possible to further simplify, but I stopped after I got all that I needed working.
I have a long table that starts on one page and finishes on another page. The issue is that tr row between these pages does not break, but it stretches. I want the following behavior: If tr can`t fit, the complete row (ALL TR, not a part) should go to the other page
I have tried these but not work for me
/*.tableAdditionalInfo >table{
!*-fs-table-paginate: paginate;
border-collapse: separate;*!
!*page-break-inside: avoid;*!
-fs-table-paginate: paginate;
border-spacing: 0;
}*/
.tableAdditionalInfo > tr {
/* page-break-before: always; */
page-break-after: always
}
You should use:
tr {page-break-inside: avoid}
I made a bootstrap table where I get information to fill up from a stored procedure with some indication where some text are in color or even background.
The trouble is when I want to print, there isn't any color. I can make a file print.css where I'll tell the background color for header and title, but how about the table when i don't even know what will be inside depending of the stored procedure? And more, the table isn't separated well between each pages where it cut my table or words.
This is what I've done until now from my page print.css where I use already td or th for the table :
.table tr {
page-break-after: always;
}
#media print {
#page {
size: letter;
margin: 1cm;
}
}
body{
-webkit-print-color-adjust:exact;
}
.panel-heading {
background-color: #54A0EB !important;
}
.panel-title {
color: #FFFFFF !important;
font-weight: bold !important;
}
#media print {
.table td,
.table th {
background-color: inherit !important;
}
.table-stripe {
background-color: #dedede !important;
}
}
Thank you for your help, really appreciate it!
My css bootstrap was double that's why i can't see color. Everything is fine now.
I'm having a trouble fixing the table on this link . It has two rows, but when I turn it to mobile/tablet views, the second row overlaps over the first row.
It looks like this on the attachment:
Please help. I'm not really good in CSS.
This is because of these lines:
#media screen and (max-width: 994px)
table.colors_pricebox tbody tr:last-child td:nth-child(2) table:first-child tbody tr:first-child
{
position: absolute !important;
}
Absolute positionings do overlap each other if they have the same margins.
If you remove the attribute or replace it by position: relative the <tr> - tags don't overlap anymore, but you have to find a way to display your <tr> - tags containing the price tag and such.
Here is the fix i recommend for quick turn around for the moment. Add this css in your media queries
#media screen and (max-width: 994px) {
td.productDetailDiscountWrapper table tr td {
padding-top: 50px !important;
}
.product_productprice {
margin-top: 40px !important;
}
}
Is there a way in CSS to modify the parent element, given the first child?
In my case, this would be to format a table cell differently if the first child is a link.
<td>Hello</td>
<td>Go here!</td>
<style>
td { padding: 5px; } /* Normal cell */
?? { padding: 0px; } /* Cell with link as first child */
</style>
No, but you can think of a different approach and do something like:
td { padding: 5px; } /* Normal cell */
td a { margin: -5px; } /* Cell with link as first child */
There are many other ways to do the similar, of course.
CSS4 should offer a :has pseudo class which would do exactly what you wanted, but we need to wait for it.