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;
}
Related
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
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.
I have a css file which styles my tables, although I have one table where I would like to use a different style, or no style? is there a way I can do something like <table style="no-style"> and then it is plain and ignores the CSS?
I have looked but I can not find anything related!
Use class definitions for table properties in your CSS file. Whenever you want them, use with class property.
CSS
table.myClass {
...
}
HTML
<table class="myClass">...</table>
<table class="anotherTableWithAnotherClass">...</table>
CSS are cascading style sheets, they only style an element. Can't manipulate anything. You will need to use JavaScript.
Best way I know of, is to use CSS classes for different styles. And use javascript to switch them or remove them.
You need to explore CSS in more depth, and one thing you might focus on is classes. You can create a "class" of styles, and apply it to a particular HTML element like a table, and not have it affect another table you want to leave "plain."
.foo {
border : 1px solid black;
}
Then apply that class to your HTML element:
<table class="foo">
...
</table>
Another way to approach the problem is with selectors.
No, you cannot take off a style that way – there is no way in CSS to say “don’t apply any of my styles inside this particular element.” You can only override style settings. For example, if you have a setting like * { color: red } in your stylesheet (just a foolish example), you cannot add a rule that would exclude a particular element and make the browser apply its default color inside it. But you can set table#foo * { color: black; } to make all text inside a table with id=foo have the black color.
Overriding overall style settings inside a table that way isn’t trivial, but certainly possible. You just need to be explicit about the style you want; you cannot say “use browser defaults.”
However, there’s an indirect way, in a sense, though it is seldom a good idea: If you put your table in a separate document and embed it via an iframe element, then the table will be displayed according to the CSS code specified for the embedded document, quite independently of the style sheets for the embedding document. At the extreme, if you specify no CSS code for the embedded document, it will appear as per browser defaults (though inside a subwindow, an inline frame, with dimensions set by the embedding document).
Is there any way that parent tag styles do not apply to child tag elements?
I have to display some data so I wish to align them in table for better view. I want to apply some styles to the table to make it look good. I am using some additional components (like plugins) in my table. So if I do apply any style to tr tag of my table, those are applied to those components tags too, if they have tr tag. This should not happen...
Is there any way that I can avoid inheritance?
<style>
/*The plug-in component may have table tr tags.So the following styles should be applied to plug-in..*/
table tr{
background:#434334;
border-radius:5px;
}
</style>
CSS are meant to be inherited like that. If you want to "not inherit" you have a few options:
Best: improve your selectors so that they only apply to the elements you need them to
Good: if existing markup does not allow you to do the above, help by giving the element(s) that need to be styled an additional attribute (e.g. extra class) that allows you to improve the selectors
Bad: write your selectors so that they apply globally, then write more selectors to "undo" the results on a case by case basis
In your case, it looks like a combination of the first two would work. You can give an id="foo" to your table and then change the selector to
table#foo > tbody > tr { /*...*/ }
The > is the child selector, which prevents the style from being applied to table rows further down the element tree.
One solution would be to name your style table tr.style1{ ... and then in each of your <tr>'s you could just add a class attribute, i.e. <tr class="style1">.
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.