I want to make angular material table scroll horizontally, I was able to do that with the scss:
.table-div {
overflow-x: scroll !important;
mat-table {
table-layout: fixed;
mat-header-cell, mat-cell {
overflow-wrap: normal;
white-space: nowrap;
overflow: visible !important;
margin-right: 30px;
flex: 0 0 300px;
}
}
}
The scroll and data worked and visible. However, the overflowed rows have no color, no border, etc..
Like the table is cut at the original width border.
How can we fix that?
This image shows the border of the table and how the overflowed rows have no styling when scrolled
Here is an example of your issue, I have added the css needed to make the table scroll and keep the hidden elements styled
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
mat-table {
width: 1200px;
max-width: 1200px;
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
margin: 0px;
}
mat-row,
mat-header-row {
display: table-row;
}
mat-cell,
mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 5px;
line-break: unset;
width: auto;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
I wrapped the material table with a div
<div class="table-responsive">
<mat-table>
...
</mat-table>
</div>
It sounds like the table rows are overflowing outside of the table's borders and they're not being styled properly. Here are a couple of things you can try to fix this issue:
You can try to wrap the table in a container div with the class "table-div" and set its width to a fixed value, this will make sure that the table is displayed within the borders.
Another option is to give the "mat-table" class a fixed width, as well as the "mat-header-cell" and "mat-cell" classes. This will also make sure that the table does not overflow beyond its boundaries.
If the table cells are not styled, try to set a border for the table and cells, this can be done by using mat-table {border: 1px solid #000;} and mat-header-cell, mat-cell {border: 1px solid #000;}
Try to set overflow-y property of the table-div to scroll too, this can be done by adding overflow-y: scroll;to the table-div class
You can also try to set the display property of mat-header-cell and mat-cell classes to 'inline-block', so they will be treated as elements with a width and a height and that can be styled.
Related
I want to use CSS to scroll only the mat-table body. I can see the scroll but the table Thead becomes a mess.
The scroll is there but the disposition is not right
see image here
this is the code i used for the tbody. when i remove the display block its gets back to normal but without scroll bar.
Any ideas on how to solve this?
tbody {
border-spacing: 0;
height:78vh;
overflow: auto;
max-height: 85vh;
display: block;
border-top: 1px solid #dee2e6 !important;
}
I would like to use pure CSS to make a HTML Table with fixed headers, scrollable tbody and fluid column width.
I made the thead and tbody display: block and added fixed column width to th and td except for the first column which needs to occupy the full available width.
table {
width: 100%;
border-collapse: collapse;
td:nth-child(1), th:nth-child(1) { width: 100%; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { min-width: 100px; }
thead {
display: block;
}
tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
}
All is working well except for the scrollbar misalignment issue. The scrollbar pushes the content to the left by certain pixels which is not fixed across browsers.
I wonder if it can be solved with some CSS tweaks?
This is the full example: https://codepen.io/anon/pen/qqVOON/
What is wrong with this? Ive read a couple of posts which suggest that in order to have inline-block elements all on the same line with only overflow-x, the following CSS is all that is required on the parent:
div {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
This is my CSS, straight from my firebug for both the parent, and the elements which i need on the same line. The elements are wrapping with only a vertical overflow. Im confused. Any suggestions?
.elementsRequiredOnSameLine {
background: none repeat scroll 0 0 white;
display: inline-block;
float: left;
height: 10em;
text-align: center;
width: 6em;
}
.parent{
display: inline-block;
margin: 10px auto;
min-height: 12em;
overflow-x: scroll;
padding: 10px;
white-space: nowrap;
width: 95%;
}
Using float: left on the elements will cause them to ignore the nowrap rule. Since you are already using display: inline-block, you don't need to float the elements to have them display side-by-side. Just remove float: left
Was because of the float:left;, once i removed that, fine. Spotted it after typing out question sorry.
I am quite new to css, and i was searching already for hours for a solution to this problem.
I have a fixed layout table in a resizable container.
i have a resizing column, that has 2 texts, the first should do a text-overflow:ellipse while the second should always show (if possible).
The requirement is to not show all the text in a table cell if it doesnt fit, but display the last 5 letters.
I figured ill put 2 spans in a td, and give a width to the second, but the width is ignored. When i tried to float the element (i can only float left, cause floating right will put the last 5 letters to the end on an long column with little text, which is not ok), left, but then the first div is not getting smaller so the text-overflow:ellipse is not applied.
E.g i need when td is short:
|Hello budd...ight?|
and
|Hello buddy ho...ight?|
but when td is long:
|Hello buddy how is it going tonight? |
This seems to be a fairly common requirement, so how can i achieve it?
I do not want any javascript, im quite sure it can be solved by css, and maybe some extra divs...
my html:
<table style="table-layout:fixed">
<colgroup>
<col/>
<col width="200px"/>
</colgroup>
<tr>
<td>
<span class="first">Hello buddy how is it going ton</span>
<span class="second">ight?</span>
</td>
<td></td>
</tr>
</table>
my css:
table
{
width: 90%;
margin: 10px;
}
tr
{
height: 100px;
}
td
{
width: 50%;
border: 1px solid blue;
padding: 5px;
height: 100px;
vertical-align: top;
position: relative;
while-space:nowrap;
}
span.first {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid red;
}
span.second
{
border: 1px solid green;
}
Any ideas how to achieve this?
Any help is very appreciated.
Thanks
Looks like I was able to get something working... here's the changed CSS:
span.first {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* --- everything below this line is new --- */
float: left;
padding-right: 5ex;
max-width: 100%;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
span.second
{
width: 4ex;
margin-left: -5ex;
display: inline-block;
}
Compatible in:
I have not tested Opera or IE<9 (although I can pretty much guarantee that IE7 won't run it, because the MDN states that IE introduced box-sizing with IE8)
Explanation:
.first
float: left; lets both spans use the same line when combined with display: inline-block;
padding-right: 5ex; makes room for the last five characters (works with MOST fonts)
max-width: 100%; lets the first span grow up to (but not beyond) the width of the TD
display: inline-block; needed to use max-width effectively
box-sizing: border-box; puts padding inside content area (max-width) use prefixes because Firefox doesn't support the non-prefixed variant yet.
.second
width: 4ex; because it gets screwy if you use 5ex with the below
margin-left: -5ex; makes .second sidle up to the edge of the text area for .first
Note: You can change the ex values to suit your needs, but make sure both
margin-left== -(padding-right)
width<=padding-right- 0.5
This is my CSS code;
#wrap {
width:50em;
max-width: 94%;
margin: 0 auto;
background-color:#fff;
}
#head {
width:50em;
height:10em;
max-width: 100%;
margin: 0 auto;
text-align:center;
position: relative;
}
#css-table {
display: table;
margin: 1em auto;
position: relative;
width:50em;
max-width: 100%;
}
#css-table .col {
display: table-cell;
width: 20em;
padding: 0px;
margin: 0 auto;
}
#css-table .col:nth-child(even) {
background: #fff;
}
#css-table .col:nth-child(odd) {
background: #fff;
border-right: 4px double #b5b5b5;
}
And my HTML code;
<div id="cont">
<div id="css-table">
<div class="col">123</div>
<div class="col">123</div>
</div>
</div>
When I scale the Firefox window, the table scales fine even down to 300px width viewport...just like I want to. But in Chrome, the table looks normal only when the viewport is wider than 50em. If I narrow the Chrome window, the table bleeds out on the right side of the wrap.
Is there a reason why is Chrome doing this?
Technically Chrome is following the rules because max-width should only apply to block elements.
From MSDN docs:
The min-width/max-width attributes apply to floating and absolutely
positioned block and inline-block elements, as well as some intrinsic
controls. They do not apply to non-replaced inline elements, such as
table rows and row/column groups. (A "replaced" element has intrinsic
dimensions, such as an img or textArea.)
The table (or in your case display:table) should technically not work or be supported. FF apparently obeys it fine, but you'll probably need to come up with another solution, either removing the display:table or the max-width.
max-width property
MSDN Doc
The solution I found was using table-layout: fixed and width: 100%
Create a div and give it a styling to display block and a max width. You may use traditional <table> and give it a styling of 100% width.
I was able to use a mixin(SASS) to fix the issue.
#mixin clearfix {
&::after{
content: "";
display: table;
clear: both;
}
}