I am using this stackblitz example of nested material tables to create similar table in my project.
https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts
This approach creates a "hidden" row, if you will inspect the page there will be rows with class "example-element-row" followed by a row with class "example-detail-row". The "example-detail-row". is the hidden one.
The issue I have is related to my corporate CSS table class which adds extra padding + strip like view (every even row is has gray background) - with this CSS classes my table looks awful as hidden row is displayed anyway
Is it possible to overcome this issue? I tried to add ngif with some flag to code below, but it breaks expandable rows feature even though the table is rendered very well
<tr *ngIf="flag" mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
To replicate the behavior caused by your corporate CSS, I added the following CSS block to the stackblitz link which you shared:
tr td {
padding:5px 0;
}
this is typical over-arching css rules for websites... to resolve, we just need to override this through a more detailed css rule:
.mat-row.example-detail-row td{
/* comment this to see the problem behavior */
padding:0;
}
complete working stackblitz here
Related
I'm trying to make a hover effect for a table with multiple rowspan but I don't manage to make it fully work.
The css as described in another stackoverflow is not working (see solution here https://codepen.io/cimmanon/pen/KqoCs ).
The example here (rowspan on multiple columns) : https://codepen.io/anon/pen/rJXgzW
The hover css effect is defined as :
tbody:hover td[rowspan], tr:hover td {
background: red;
}
Any suggestions?
The trick in the working example is to use multiple <tbody> elements in the table where each table body contains one table cell spanning multiple rows. That way
tbody:hover td[rowspan] { background: red; }
makes it magically appear as requested. This doesn't work with the second example in the same way, as there are (1) multiple row-spanning elements and (2) it's using <th> elements (which is easy to address, though).
To get it working using CSS only, you would need to nest tables inside table cells.
How can I style the first-child AFTER a page break has occurred?
The ultimate situation I'm facing is that I would like to style the first row of a table differently, and when printing the table spans multiple pages. I successfully used :first-child to style the first row. I also successfully avoided page breaks inside rows. I can not figure out how to style the first row on the second page of the table, though.
I'm familiar with the css pseudo class first-child (http://www.w3schools.com/cssref/sel_firstchild.asp), and I'm also familiar with the css print property page-break-inside (http://www.w3schools.com/cssref/pr_print_pagebi.asp). I'm unable to get them to play nicely together?
EDIT:
Adding code sample
HTML:
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
CSS:
table tr:first-child td { border-top: solid red 2px; }
table tr { page-break-inside: avoid }
Okey, direct answer — you can not do that as how you want.
Edit: oh, looks like I answer for a little more complicated question like "how to add table header on each printed page", but, anyway the way of solution is the same. Hope it's ok.
But there is several tricks to do what you want.
1) Break table in several parts, add thead part to each of them and remove margin, so it will looks like just one table. Add in css something like:
table {
page-break-inside: avoid;
page-break-after: auto;
}
table + table thead {
display: none;
}
Also do not forget to set td width, cause tables without thead can have different width's.
After that add print styles:
#media print {
table + table thead {
display: table-column-group;
}
}
Yep, there is a chance for duplicate headers on page, but it still better than nothing. And if you find good number of lines for your project it will looks as you need
2) Prepare dedicated downloaded printable version of page with WKHTMLTOPDF, for example. So you can catch page breaks well, and add what you need. This option give max flexibility of output, but will take some time for support.
3) Calculate everything with JS. Print your page and analyze it — add some constants to js (height per page), and, when someone try to print — calculate page breaks, find closest element and add what you need.
Hope you got answer.
Have a nice day.
I was also looking for a way to apply styles to only the first and last rows of a table over a page break, but maybe for a different use case.
I needed to give my whole table a border, but not on the table rows, just the outside. The easy way is to add a border to the table, but when a page break occurs, the borders aren't redrawn at the break.
My solution was to use a thead and tfoot, as these elements are repeated at every break. This gave me a full border around the table that obeyed page breaks.
You can modify this technique for your circumstances. Say if you wanted to change the styles of just the first row (and have it be consistent across page breaks), you just put that row in the thead or the tfoot depending on if you want the first or last row. You can even do this with an existing thead. Just give each thead tr a class so you know which is the main header, and which is a styled row.
There were a few caveats. The table footer had to have something within its tds otherwise it won't render. I added a (which means "no breaking space") to the first td and then set the font-size on the td to 1px (Otherwise there will be a noticeable gap at the bottom of your table). The font size has to be applied directly to the td. A font size of 0 will not work either. It has to be non-zero.
Example
This example is for my use case, but you can modify it. You can also use as many columns as you want. I used one for simplicity. The thead and tfoot must have the same number of columns though.
.my-table tr {border-left: 1px; border-right: 1px;}
.my-table thead {border-top: 1px;}
.my-table tfoot {border-bottom: 1px;}
// must be applied to the td!!!
.my-table tfoot td {font-size: 1px;}
<table class="my-table">
<thead><td></td></thead>
<tbody>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</tbody>
<tfoot><td> </td></tfoot>
</table>
I have to hide part of a table, the cells are th tags and inside the th I have Span title. I been looking but I can't find any tip. I would like to hide one of the cells, in sort of just hiding one cell of the the entire table. Its possible to perform this with the CSS file?
This is how my css is made:
.GridHeaderStyle th{text-align:center;}
.GridMainSytle td, .GridHeaderStyle th
{
border:thin solid #ffffff;
*border:none;
}
As you can see the th and td are together and I can not really just specify the th in question. Google developper tools show me that the th tag is as
<th scope="col" widgth="10%">
<span title="column1">
I have tried the follow but it hide me all the cells and not the one in question.
.GridHeaderStyle th[scope=col]
{
display:none;
}
Thanks in advance
Please try below CSS code :
.GridHeaderStyle th span {
display:none;
}
Without seeing more of the markup, it's hard to know for sure, but it's likely based on the example that the th[scope=col] selector matches all of your header cells. Look at using the nth-child CSS selector to be more specific, but be aware that's a brittle solution. If your markup changes such that the header you wish to suppress is now in a different order, your rule will hide the wrong column.
If your use case allows it, you could hide the span rather than the column, and therefore address the element a bit more specifically. Try the rule:
th span[title=column1] {
display:none;
}
First I was using <h:dataTable> and I was OK with this but after then I needed some more functionality, So I started using Primefaces and used its <p:dataTable>. Everything is going fine but the CSS that I applied on tables stopped woking. Then I found that <p:dataTable> is first creating a <div> and then inside the <div>, it is creating a <table>.
<div id="tcform:tclist" .......>
<table role="grid">....</table>
</div>
But <h:dataTable> creates just HTML <table>. Now I want to know how can I get table's id or is there any solution that I can access that table. I also want to know that Why <h:dataTable> and <p:dataTable> differs from each other.
If you want to style tables in a generic manner, just change the CSS selectors accordingly. The <table> of <p:dataTable> is selectable by the ui-datatable class.
.ui-datatable td {
background: pink;
}
If you want to style only a specific table in a specific manner, rather give it a classname so that you can select by the classname instead of by ID.
E.g.
<p:dataTable styleClass="foo">
is overrideable by .ui-datatable.foo {}. E.g.
.ui-datatable.foo td {
background: hotpink;
}
I would like to have all cells in a with "vertical-align:top" style. For technical reasons outside my control, I cannot define a new class, or change the stylesheet at all; nor can I set "style" for individual cells, or even rows. All I can do is set the "style" attribute of the <table> element itself.
Using <table style="vertical-align:top"> fails -- apparently, it sets the alignment of the table within its own context, not of individual cells inside it. Is there any other alternative that I'm missing?
You can use css
table tr td {
vertical-align: top;
}
No, as far as I can see there is no way to do this without some form of access to either the td itself or a style sheet.
Can you apply a workaround like this one? It's not pretty and invalid according to the W3C, but should nevertheless work in all browsers:
<style type='text/css'> table.topalign td { vertical-align: top } </style>
<table class="topalign">
....
Set the "classic" HTML valign attribute on the table. The value will be inherited by the cells.
<table valign="top">
…
See Tables, Table formatting by visual user agents, Horizontal and vertical alignment in the HTML 4 spec.
table tr {valign: top}
In this case you don't need to use css class.