Push the last data grid row to the bottom of the grid - vmware-clarity

I'm trying to make a summary footer for the datagrid that will display a totals or summation of all the values in all rows of specific columns. Unfortunately, it's not supported in Clarity datagrid. There is a workaround as mentioned in the comments in this github issue: #2809. However, my goal is to have the summary row/footer sit/anchored to the bottom of the grid. Is there a way to do it via css to push the last row to the bottom of the grid?
Actual: From the Stackblitz provided in the github issue
(source: imgbbb.com)
Expected:
(source: imgbbb.com)


With Css You can do the following
#total {
border-top-style: dashed;
margin-top: 50%;
}

Related

Is it possible to use grid layout to make a table with frozen/fixed header

The fact that grid layout allows me to build a table in CSS in a completely different way, I was trying to figure out a way to make a grid layout where the first row stays in view, whilst the rest scroll. Importantly without losing the grid behavior (a 'cell' with a lot of content should change the width and/or height of the entire column and/or row including the unscrollable first row).
Is this possible?

I recently came upon this codepen from #Nicolas CHEVOBBE:
https://codepen.io/nchevobbe/pen/bYZEqq?editors=0110
It shows an example of what you describe. Fixed header row using grid layout. It's quite simple for a feature that takes a lot of effort to code otherwise.
The essential part is using position sticky on header cells:
[role=columnheader] {
background-color: #F9F9FA;
position: sticky;
top: 0;
padding: 5px;
border-bottom: 1px solid #E3E4E4;
}
Hope it helps.

Last image out of boundary in bootstrap album

I have used the bootstrap album as a starting point to create an album.
The problem is that last image in each row is larger than the first two.
I have checked the css code but unable to identify the issue.
Here is the link to my page
brotherxii.com/aquariangallery.html

Add this on your CSS
.card > a > img{
max-width: 100%
}

make cell span two colums css3 (no tables)

I am trying to build a table purely in CSS. Have succeded so far, even though I have one issue:
How do I make a cell span two columns?
I made this fiddle, and in the top where the "XXXXXX" with the grey background is, I simply cannot make it span the width of my box. I tried to use column-span, but it did not work, so I guess I have redesign it in another fashion .. just how?
I am using this code, but the content of tabledata_lang stops just where tablecells below stop:
#tabledata_lang {
padding: 6px;
width:100%;
}
See my fiddle here:
http://jsfiddle.net/T7wU2/
(Probably easier to see my issue here...)
Hope someone has some input..
Regards
Regin

I think you are looking for the colspan attribute
<td colspan="2"></td>
This will make a cell span 2 columns

Cleaner way to create pen highlight effect in css?

Here is a fiddle showing the effect I wish to create
2 mandatory requisites:
i need a small spacing (padding/margin) between each highlighted
row
the green highlight should only cover the length of the text on each line
I tried a mixture of <div><span>text</span></div> combos and could only ever get to 1. or 2. but never both, except with a table.
whilst im happy this content being in a table as it is tabular, im not happy with the end result as im splitting a paragraph across table rows which isnt cricket.
how to get the effect with just divs and spans?

Try this...
display: block;
float: left;
clear: both;
Here's an example I made: http://jsfiddle.net/Gxhsq/

Here I am getting trouble with last column. I want last column bg-color and borders up-to vertical scroll bar

Here I am getting trouble with last column. I want last column bg-color and borders up-to vertical scroll bar. And header text is overlapping.
Here is the link : http://jsfiddle.net/8JvZQ/

Floating header
Added width: 100%; to .tableScrollBar table {}:
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/3/
Note: This is the straight-up solution to your problem. However, if you simply wish the effect of the table header always being visible. Then you can use jQuery to make the full floatable on scroll. Here is a demo of the floating header and from here you can download it.
Last row (CSS)
This is css version of detecting the last row. However, it is not crossbrowser, since IE does recotnize :first-child but not :last-child :(
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/4/
Last row (jQuery)
This is the jQuery version for detecting the last row. This is the ultimate solution!
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/9/
Not full-width version
This is being done by adding display: inline-block; to the global container.
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/10/
Last column being full-width (just like your screenshot)
Being done by adding class="w100pre" to phone column and also creating a new class:
.w100pre {width: 100%;} that can be used globally on your site :)
Fiddle: http://jsfiddle.net/hobobne/8JvZQ/11/
NOTE: I wasted about 2 hours on this question.

here exactly like ur screenshot fixed the text overlaping. http://jsfiddle.net/8JvZQ/14/
hiding the row for fixing the overlapping text.

Resources