I am on a project with Angular 5 and I am trying to have a table within and a vertical and horizontal scroll (with fixed left column and header), the vertical scroll works but not the horizontal one, even worse my inside is displayed in two lines.
My number of columns is also a variable and I wish that table takes 100% width. How do I achieve 100% table width?
My code :
css:
.table-tendency thead, .table-tendency tbody,.table-tendency tr,.table-tendency td, .table-tendency th { display: block; }
.table-tendency tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
.table-tendency thead td {
height: 50px;
font-weight: normal;
}
.table-tendency tbody {
max-height: 400px;
overflow-y: scroll;
}
.table-tendency {
overflow-x: scroll;
}
.table-tendency thead td {
width: 16.4% ;
float: left;
text-align: center;
}
.table-tendency tbody td {
width: 16.6% ;
float: left;
text-align: center;
}
HTML
<div class=" table-responsive marge" *ngIf="selectedForecastSection.name !== '' && showTendencies">
<table class="table table-striped table-tendency">
<thead>
<tr>
<td> {{'Year' | translate}}</td>
<td *ngFor="let tendencyPeriod of tendencyPeriods"> {{tendencyPeriod.name}}</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let year of years" >
<td class="yearColumn"> {{year}}</td>
<td *ngFor="let tendencyPeriod of tendencyPeriods">
<span [ngStyle]="setFont(dataFilter(year, tendencyPeriod.id))"> {{dataFilter(year, tendencyPeriod.id).anyVehicleFlow | number:'1.2-2'}}
</span>
</td>
</tr>
</tbody>
</table>
</div>
Related
I need a table just like describred in Fixed right column table scales to responsive design But when I define a background color using css the rule doesn't apply to the fixed column
Jsfiddle: https://jsfiddle.net/3ckvkr1f/2/
Thanks!
HTML
<div class="table-responsive">
<table class="table-striped" cellpadding="9">
<thead>
<tr>
<th>
col1
</th>
<th>
col2
</th>
<th class="crud-links"> Options</th>
</tr>
</thead>
<tr>
<td>
R1col1 alçkfjalçkfjalkjflaksjflaksj
</td>
<td>
R1col2 aslkfjasklçfjaklçfjasklfjasçklfjas
</td>
<td class="crud-links">
x
</td>
</tr>
<tr>
<td style="white-space: nowrap;">
R2col1 alçkfjalçkfjalkjflaksjflaksj slkfjsçklafjaslfkjsldk
</td>
<td style="white-space: nowrap;">
R2col2 aslkfjasklçfjaklçfjasklfjasçklfjas
</td>
<td class="crud-links">
x
</td>
</tr>
<tr>
<td style="white-space: nowrap;">
R3col1 alçkfjalçkfjalkjflaksjflaksj slkfjsçklafjaslfkjsldk
</td>
<td style="white-space: nowrap;">
R3col2 aslkfjasklçfjaklçfjasklfjasçklfjas
</td>
<td class="crud-links">
x
</td>
</tr>
</table>
</div>
CSS:
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: blue;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eeeeee;
}
.table-hover th, .table-hover td {
padding: 9px;
}
.table-responsive {
width: inherit;
max-width: 80%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 0;
}
.crud-links{
position: absolute;
overflow:hidden;
width: 91px;
right: 0;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: blue;
}
Are you talking about the ones with the class .crud-links?
If so, just do
tr .crud-links { background: something; }
If you're talking about them not getting the same color as every other in the main part, just do the same, but using tr .crud-links:nth-of-type(odd)
Your css code refers to tbody tag, but You are missing it.
.table-striped > tbody > tr:nth-of-type(2n+1)
Correct yout html code, or change css like this:
.table-striped tr:nth-of-type(2n+1)
/*first three column class name as follow, */
/*tbody used for only tr td work otherwise table header also work with bgcolor*/
/*fixed column first three column hover color change*/
tbody > tr:hover > .freez,
tbody >tr:hover > .freez2,
tbody> tr:hover > .freez3{
background-color:#f5f5f5 !important;
}
I have spent over a day figuring out something very simple. I have a website where I use about 10 tables. I want only 1 of those 10 tables to have a fixed header and a scrollable bar.
I found a good example online and modified it. I am able to have a table with fixed header and scrollable bar.
New css
.table-fixed tbody {
display:block;
max-height:625px;
overflow-y: auto;
}
.table-fixed thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed thead {
width: calc( 100% - 1em )
}
I add the table-fixed class to my table definition and it works.
<table class = "table table-bordered table-hover table-striped table-condensed table-fixed">
The problem is that if I do not include the table-fixed in the other tables, the 9 other tables are all screwed up. For example:
No table-fixed class added to the other tables
<table class = "table table-bordered table-hover table-striped table-condensed">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle;">something</th>
<th style="text-align: center; vertical-align: middle;">something</th>
<th style="text-align: center; vertical-align: middle;">something</th>
<th style="text-align: center; vertical-align: middle;">something</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle;">something</td>
<td style="text-align: center; vertical-align: middle;">something</td>
<td style="text-align: center; vertical-align: middle;">something</td>
<td style="text-align: center; vertical-align: middle;">something</td>
</tr>
<tbody>
</table>
How can I fix this issue? I want the changes to CSS to only affect 1 table. My table-fixed class works, but it looks like I am modifying the tbody where it affects it globally. Is there a way to fix this?
Credit to sringland.
I modified the original code:
.table-fixed tbody {
display:block;
max-height:625px;
overflow-y: auto;
}
.table-fixed thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed thead {
width: calc( 100% - 1em )
}
To this:
.table-fixed > tbody {
display:block;
max-height:625px;
overflow-y: auto;
}
.table-fixed > thead {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed > tbody > tr {
display:table;
width:100%;
table-layout:fixed;
}
.table-fixed > thead {
width: calc( 100% - 1em )
}
The issue was resolved by adding the > to only affect immediate children and to break up the thead, tbody tr { definition because it was affecting the tbody of the Table class.
I have a dynamically generated table, table column's may have large number so that user need to scroll horizontally to see all column's data. My task is that, I have to make fixed first 2 column when user want to see other column's data.
Till now, I can make absolute position of first 2 column, but others column is not properly positioned. My last output is given below:
My code is given below:
HTML
<table id="teamTable" class="table data-table table-hover" ts-wrapper>
<thead>
<tr>
<th class="table-col-xs table-col-border" rowspan="2">
<input type="checkbox">
</th>
<th class="table-col-border" ts-default rowspan="2">
Name
</th>
<th ng-repeat="" class="table-col-sm table-col-border text-center table-th-removable">
column 3
</th>
<th ng-repeat="" class="table-col-sm table-col-border text-center table-th-removable">
column 4
</th>
................................
</tr>
<tr>
<th ng-repeat="" class="table-col-sm table-col-border text-center">
column 3
</th>
<th ng-repeat="" class="table-col-sm table-col-border text-center">
column 4
</th>
..............................
</tr>
</thead>
<tbody>
<tr ng-repeat="" ts-repeat>
<td class="table-col-xs table-col-border" rowspan="2">
<input type="checkbox">
</td>
<td class="table-col-border" ts-default rowspan="2">
User Name
</td>
<td ng-repeat="" class="table-col-sm table-col-border text-center table-th-removable">
column 3
</td>
<td ng-repeat="" class="table-col-sm table-col-border text-center table-th-removable">
column 4
</td>
................................
</tr>
</tbody>
</table>
CSS
/* first make some space using 'margin-left' */
table#teamTable {
margin-left: 125px;
margin-bottom: 20px;
}
/* first table heading */
table#teamTable > thead > tr:first-child > th:nth-child(1) {
margin-left: -126px;
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
height: 45%;
}
/* second table heading */
table#teamTable > thead > tr:first-child > th:nth-child(2) {
position: absolute;
margin-left: -76px;
z-index: 9999;
overflow: hidden;
background-color: #fff;
height: 45%;
width: 75px;
}
/* rest of the table heading */
table#teamTable > thead > tr:first-child > th:nth-child(n+3) {
position: relative;
}
table#teamTable > thead > tr:first-child > th {
position: relative;
}
/* first table column */
table#teamTable > tbody > tr > td:nth-child(1) {
position: absolute;
margin-left: -126px;
z-index: 9999;
overflow: hidden;
background-color: #fff;
height: 50px;
}
/* second table column */
table#teamTable > tbody > tr > td:nth-child(2) {
position: absolute;
margin-left: -76px;
width: 75px;
z-index: 9999;
overflow: hidden;
background-color: #fff;
height: 50px;
}
/* rest of the table column */
table#teamTable > tbody > tr > td:nth-child(n + 3) {
position: relative;
}
plnkr code
Style the tbody with predefined size and use overflow-y: scroll;
Check this fiddle and logic http://jsfiddle.net/kabircse/bo8bu0u3/1/
Also you can use table header fixed using fixedheadertable
http://www.fixedheadertable.com/
Another example of fixed http://codepen.io/ajkochanowicz/pen/KHdih
I have a table with fixed first column which will allow me to scroll the table columns left and right while keeping the first column in place.
(Entire table is in the wrapper that gives me the scrollbar as table is always wider than the wrapper.)
Table also has a toggle button on the header to show extra data in some td's.
When using Firefox, scrolling table to the right and then clicking the toggle button the entire first column disappears ...and this happens only in Firefox.
How to fix that?
Here is the fiddle
HTML
<div class="da-fixed-column-table-wrapper" data-ng-app="testModule" data-ng-controller="testController">
<table class="da-fixed-column-table" border=1>
<thead>
<tr>
<th>
<button ng-click="show=!show">show-hide</button>
</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
<td>second</td>
<td>third</td>
<td>fourth</td>
<td>fifth<span ng-show="show">more data</span></td>
</tr>
<tr>
<td>first</td>
<td>second</td>
<td>third<span ng-show="show">more data</span></td>
<td>fourth</td>
<td>fifth</td>
</tr>
</tbody>
</table>
</div>
CSS
.da-fixed-column-table-wrapper {
width: 100%;
overflow: auto;
box-sizing: border-box;
background: DarkKhaki;
}
.da-fixed-column-table {
width: 120%;
border-collapse: collapse;
box-sizing: border-box;
text-align: right;
}
.da-fixed-column-table tbody tr td:first-child,
.da-fixed-column-table thead tr th:first-child {
position: absolute;
border: none;
top: auto;
width: 8em;
text-align: left;
background: white;
}
.da-fixed-column-table thead tr th:nth-child(2),
.da-fixed-column-table tbody tr td:nth-child(2) {
padding-left: 9em;
}
You just need to add left: 0 to make sure the elements stick correctly. The change in width caused it move out of view.
.da-fixed-column-table tbody tr td:first-child,
.da-fixed-column-table thead tr th:first-child {
position: absolute;
border: none;
top: auto;
width: 8em;
text-align: left;
background: white;
left: 0;
}
EDIT 2: I'm talking about the layout of the table, not the colours.
I need to style my table so that it appears as such:
The idea is to have the first th td pair on top and the rest should be in line under it.
Is that feasible through CSS?
I don't have control over the HTML here so CSS is my only option.
Edit:
Here's the HTML
<div class="content">
<table>
<thead>
<tr>
<th class="thtitle" >
Title </th>
<th class="thvalue" >
Value </th>
<th class="thquantity" >
Quantity </th>
<th class="thsum" >
Sum </th>
</tr>
</thead>
<tbody>
<tr class="first">
<td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>
</tr>
<tr class="last">
<td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>
</tr>
</tbody>
</table>
</div>
Edit 2:
I've added a fiddle that does exactly what you want, but be warned that nth-child doesnt play nice in IE8. It also assumes that the HTML you gave us is ALWAYS that way [ie always has the same amount of th/td's].
http://jsfiddle.net/8awAj/
Edit:
Is the html you posted ALWAYS like that? Ie never any more or less headings etc?
This isn't 100% what you want, but its kind of close. To get exactly what you want you would have to do a LOT of manual absolute positioning using :nth-child which would be horrible.
http://jsfiddle.net/9JWpA/
table {
width: 100%;
padding-top: 40px;
position: relative;
}
th {
background: yellow;
}
td {
background: green;
}
th,
td {
top: 40px;
width: 16.666%;
position: absolute;
}
th:first-child,
td:first-child {
width: 100%;
top: 0;
left: 0;
}
td:first-child {
top: 20px;
}
th:nth-child(2) {
left: 0;
}
td:nth-child(2) {
left: 16.666%;
}
th:nth-child(3) {
left: 33.333%;
}
td:nth-child(3) {
left: 49.998%;
}
th:nth-child(4) {
left: 66.666%;
}
td:nth-child(4) {
left: 83.33%;
}
try this..
http://jsfiddle.net/9JWpA/
html:
<table cellspacing=0;>
<tr><th colspan="6">th</th></tr>
<tr><td colspan="6">td</td></tr>
<tr><th>th</th><td>td</td><th>th</th><td>td</td><th>th</th><td>td</td></tr>
</table>
css:
table
{
width:200px;
border:1px solid black;
text-align:left;
}
th
{
background:yellow;
}
td
{
background:green;
}