Is there any way to make Angular Material with a sticky first column using CSS?.
Here is ready to edit Stackblitz code
I have tried to adapt this solution https://jsfiddle.net/zinoui/BmLpV/ but for some reasons, the first column is thrown out of the table itself and it loses styling.
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>..........
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
.......
<tr>
</tbody>
</table>
</div>
</div>
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
With the angular material version 6 this has been made easy.
You can add sticky tag on columns that need to be sticky on the left of the table and stickyEnd tag for the ones on the right of the table.
here is a Stackblitz example
td:first-child, th:first-child {
position:sticky;
left:0;
z-index:1;
background-color:grey;
}
I have used stickyEnd to achieve this like below.
<ng-container matColumnDef="12" class="white-bg" stickyEnd>
</ng-container>
.mat-table-sticky:first-child {
border-right: 1px solid #e0e0e0;
}
<ng-container
matColumnDef="name"
sticky
>
</ng-container>
`
.mat-table-sticky:first-child {
border-right: 1px solid #e0e0e0;
}
`
It worked for me using;
` :host ::ng-deep .mat-cell:first-child, .mat-header-cell:first-child {
position: sticky;
position: -webkit-sticky;
right:0;
z-index:1;
background:inherit;
border-left: 1px solid grey;
} `
Related
Lets say we have this table:
<table>
<tr>
<td width="50px">Text crossing two td´s</td>
<td width="50px"></td>
</tr>
</table>
How can the text be on top of the two td´s and follow the size of the tr?
https://jsfiddle.net/roj7w1t4/
Is it possible?
EDIT
I need the borders to stay visible. Therefore i cannot use colspan!
Is it possible to create a span and put it over the td´s?
To make more sense what i am trying to do.. this is a small example of my application: What printable element is better to use than linear-gradient?
THE ELEMENT
<div class="elementsDiv ui-draggable ui-draggable-handle" id="29065-1_105" data-weight="938" data-nr="105" style="width: 159.5px; height: 20px; position: absolute; left: 108px; top: 27.1875px;"><table style="height: 100%;"><tbody><tr style="border 1px solid black;"><td style="width: 34.2px; border-right: 1px dotted black;">105</td><td style="width: 91px; border-right: 1px dotted black;"></td><td></td></tr></tbody></table></div>
The only way I can image doing this is placing an element outside the table and having a container around the table and the element. Then placing the element using position absolute on top of the table.
div {
width: 200px;
position: relative;
}
table {
width: 200px;
}
td {
border: 1px solid red;
height: 40px;
}
span {
position: absolute;
padding: 2px;
z-index: 99;
}
<div>
<span>Lorem ipsum dolor sit amet</span>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
How about changing your html layout? Try to use after pseudo element and position:absolute. This technique saves me in a lot of situation and it's very strong, I think.
div {
border: 1px solid green;
padding: 2px;
position: relative;
width: 150px;
}
div:after {
background: green;
bottom: 0;
content: '';
display: block;
left: 50%;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 1px;
}
<div>
This text should cross two td´s
</div>
table {
border: 1px solid black;
}
td {
border: 1px solid red;
}
th {
text-align:center;
}
<table>
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr>
<td width="50px">This text should cross two td´s</td>
<td width="50px"></td>
</tr>
</table>
You can include the border will be visible.
All the best. For any query please comment.
I have a HTML Table with 2 columns and about 80 rows, which contains Acronyms, and their meanings.
Is there a (CSS?) way to display just the first row of the table, and have the meaning (i.e. it's accompanying td in the same tr) come up in some sort of box on mouseover?
This question has been asked before, but yes. You can.
JSfiddle
CSS:
.meaning {
display:none;
}
.Acronym:hover + .meaning {
display:unset;
}
HTML:
<table>
<tbody>
<tr><td class="Acronym">Foo</td><td class="meaning">bar</td></tr>
<tr><td class="Acronym">Foo2</td><td class="meaning">bar2</td></tr>
</tbody>
</table>
This is possible with only css using the :hover selector.
Here is an example of a cell with a tooltip, each .cell can be a <td> in a table.
Codepen
html
<span class="cell">
acr.
<div class="tooltip">Acronym</div>
</span>
css
.cell {
border: 1px solid black;
padding: 5px 10px;
}
.cell .tooltip {
position: absolute;
opacity: 0;
transition: opacity 250ms;
border: 1px solid grey;
background-color: white;
padding: 2px;
}
.cell:hover .tooltip {
display: block;
opacity: 1;
}
I am encountering an issue in IE9,10,11 where an ::after pseudo element will not fill 100% of the height of it's td parent.
If the first column in the second row had two lines of text, the pseudo element would fill the full height with no problem. So, I figured that the issue was happening because the td was not filling the height of the tr but that isn't the case.
The first screenshot is Chrome and the second is IE9
HTML
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
CSS
table td {
border-bottom: 1px solid;
}
table td:first-child {
position: relative;
}
table td:first-child::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 100%;
display: block;
background-color: orange;
}
Codepen: http://codepen.io/cbier/full/BjpaqB/
P.S. I am using an ::after pseudo-element instead of borders for a special reason and it is a requirement
Thanks!
May be using a single pseudo element for the whole table ?
table {
overflow: hidden;
}
table td {
border-bottom: 1px solid;
}
table tr:first-child td:first-child {
position: relative;
}
table tr:first-child td:first-child:after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 1000px;
display: block;
background-color: orange;
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
An alternate way, with background : linear-gradient
table td {
border-bottom: 1px solid;
}
table td:first-child {
background-image: linear-gradient(270deg, orange 3px, transparent 3px);
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
You can use following code for it:
table td:first-child::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 45px;
display: block;
background-color: orange;
}
it is giving same output in chromeas well as IE 9
I find that if I put an image inside a table cell like this (JSFiddle):
<table style="height: 300px; border: 1px solid black">
<tr>
<td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td>
</tr>
</table>
There will be a small space below the image, making the vertical align not exact:
Does any one know what is happening here?
I tried to add vertical-align: middle to the td, but it makes no difference.
Have you tried adding display: block to the img element? Seems to fix most problems for things within tables.
img {
display: block;
}
<table style="height: 300px; border: 1px solid black">
<tr>
<td>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" />
</td>
</tr>
</table>
JSFiddle
You have to set the img as "display:block"
img {display:block}
http://jsfiddle.net/91beLce7/4/
Try this Fiddle
*{
margin: 0;
padding: 0;
}
table tr td img{
display: block;
}
You can fix that with line-height: .8em;
Try like this: Demo
* {
margin: 0;
padding: 0;
}
table {
background:red;
height: 300px;
border: 1px solid black;
}
tr {
background:#ccc;
}
img {
background:green;
display: block;
}
Problem
I have a fixed width table (which it must be) and one of the cells contains text
that is too long to fit within it, so it overflows outside the cell to the right.
I need to have all the table cells' text to be aligned to the right.
I ideally don't want to change any of the markup.
What I'm Looking For
I'm in need of finding someway for the (text in the example) "longlonglong" to overflow to the left over the other previous cells and maintain it's aligned right state.
Code
HTML
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">very longlonglong text</td>
</tr>
</table>
CSS
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Example
http://jsfiddle.net/xareyo/eVkgz/
See http://jsfiddle.net/eVkgz/1/
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">
<div id="container1">
<div id="container2">very longlonglong text</div>
</div>
</td>
</tr>
</table>
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
#container1 {
width: 30px;
position: relative;
}
#container2 {
float: right;
overflow: visible;
text-align: right;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Do you need a variable height of the cells?
If not:
Place a div inside the td and this CSS:
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
position: relative;
}
td div {
position: absolute;
right: 0;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Add word-break: break-all; to yours td style:
td {
word-break: break-all;
text-align: right;
border: 1px solid black;
vertical-align: top;
}