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.
Related
I'm using django tables2, and I think it would be useful to have up and down arrows on header columns to indicate the current sorting order, especially when the default sort is on a column other than the first.
Tried playing with CSS but no luck, any suggestions or examples on how to do this?
The answer provided in this question may solve your problem, though it it hard to know for sure without knowing what you have tried already with CSS.
The templates that come built-in with django-tables2 all render column attributes to the final HTML, so that a column that is defined as orderable=True will produce column header tags with an "orderable" class (e.g. <th class="orderable">). Furthermore, columns that have been selected to sort ascending or descending will have asc or desc class identifiers added on render.
So, you can set up a CSS rule that will render three different arrow images depending on the state of the orderable column:
table.table thead th.orderable {
background: url(path_to_unsorted_indicator_image)
}
table.table thead th.asc.orderable {
background: url(path_to_ascending_indicator_image)
}
table.table thead th.desc.orderable {
background: url(path_to_descending_indicator_image)
}
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 want to set a border on a table. My problem is: that on some pages one or more table are around the real one.
So my question is: How can i set the border only on the last table within others? Or when the table is alone, than this one?
Example:
<table>
.. This table should have borders..
</table>
<table> /* This one shouldn't have borders*/
<tr><td>
<table>
.. This table should have borders..
</table>
</td></tr>
</table>
Thank you for your help
I have an example here: http://jsfiddle.net/ecto0jtd/
Ok, I think the Idea from anonymousxxx (http://jsfiddle.net/fauzi/k0ntkt4d/1/) is the easiest way to solve this. Thank you
The purpose seems to be to set border on a table but only if it does not contain a table. This is generally not possible without using extra markup, such as a class attribute. The reason is that in current CSS, you cannot select an element on the basis of its content.
The simplest approach is to set, say, class="border" on those tables that should have a border.
Or you could use <table border> and the selector table[border] in a rule that sets the specific borders you want (but the border attribute is regarded as bad/deprecated/nonconforming by some).
In your example above,
tr td table{
border: 2px solid red;
}
Would style only tables nested within a row and data cell of a parent table.
Depends how many levels deep you want to go and if you only want to style nested tables or the last nested table? It also has broader browser support than pseudo-selectors which may be a factor depending on which browsers you need to support
See http://codepen.io/anon/pen/LCHyE for working example
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;
}