I have a table inside table header
http://www.bootply.com/H6Glv5owrj
I want to align the last two table headers bottom row with first set of table headers.
set your css as:
.table {
width: 100%;
max-width: 100%;
margin-bottom: 0px;
}
fixed your booty
Related
I am trying an angular table to display data, I can able to produce data but when I try to apply vertical and horizontal scrolling, I want to apply scroll bars for the table rather than for the page, I could able to get it done but for whenever scroll bar is applied, table body columns are getting disturbed as below
https://stackblitz.com/edit/angular-lss9nk?file=src%2Fapp%2Fapp.component.html
You can remplace
overflow: auto;
with
overflow: overlay;
like :
table thead, table tbody, .trClass {
width: 100%;
display: block;
/* overflow: auto; */
overflow: overlay;
/*overflow-y: scroll;*/
}
I am using this NG-TABLE and having a hard time trying to modify CSS. I want fixed header and scroll bar for the data. I am using CSS in this link.
My html looks like this.
<ng-table class="table-scroll" [config]="config"
[rows]="rows" [columns]="columns">
</ng-table>
I opened developer tools and observed that table scroll css is not working.
I found the issue. User agent css is overwriting my css. Inside ng-table, there is another table and clss. How can I override that ?
When you use the standard class attribute its value can be ignored by the Angular element.
Much better to go with ngClass instead, as it will append its values to any classes added by the element:
<ng-table [ngClass]="'table-scroll'" [config]="config" [rows]="rows" [columns]="columns">
</ng-table>
Example plunker: https://plnkr.co/edit/d4uFrAsnRJqYMqiyLuTG?p=preview
A second option would be to change the selector from .table-scroll thead ... to the generic table selector table thead ... etc, if you don't have other tables on the page that would be affected.
As the structure is bit different, you can adjust your CSS:
.table-scroll table thead {
display: table;
width: 100%;
table-layout: fixed;
}
.table-scroll table tbody {
max-height: 150px;
overflow-y: auto;
display: block;
width: 100%;
table-layout: fixed;
}
.table-scroll table tr {
display: table;
table-layout: fixed;
width: 100%;
}
.table-scroll table td {
height: 47px; // needed in order to keep rows from collapsing
}
Eventually you can add !important to the rules that can't be overwritten...
Im using GWT. I need to make two columns fixed, to freeze them, and the others should scroll fluently.
Here is simple layout before freezing two first columns (where numbers are indicated and Z column)
After freezing:
As you can see, if freezes correctly I can scroll and two first columns dont move. HOWEVER, A column content goes before Z column and disappears. (I moved Z column to show how A column content hides purple color)
My css:
//for number column
tr.Row td.row1 {
border-color: #ffffff;
position : fixed;
height : 119px;
left : 344px;
overflow-y: auto;
}
// for Z COLUMN
.lockHead{
position: fixed;
z-index:1!important;
}
Maybe a solution is to use padding-left or smt? Please help Im totaly stuck on it.
You can give the GWT table a class like class="fixed_header" and style the rest via CSS. Your CSS approach seem a little bit complicated I think.
Can you check if this is what you want to achive? A fixed header. CSS:
.fixed_header {
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header td:nth-child(1), th:nth-child(1){
min-width: 100px;
}
.fixed_header thead tr {
display: block;
position: relative;
}
.fixed_header tbody {
height: 60px;
display: block;
overflow: auto;
}
https://jsfiddle.net/ghsroh81/
I am trying to make the resource day view (https://github.com/jarnokurlin/fullcalendar) of FullCalendar with fixed column size.
I have tryed this for making the columns the same width:
.ui-widget-header
{
width:150px !important;
}
and this:
.fc th {
width:150px !important;
}
But the columns keep the size according to the size of the column content.
I have added horizontal and vertical scrollbars to the calendar could this be the problem?
I also tryed this: Fixed Column Widths in Resource FullCalendar but that didn't work for me.
Thanks
Dani
I have solved the problem myself:
I had to add the table layout fixed directly to the table fc-border-separate not only table
table.fc-border-separate { table-layout: fixed; }
and then with:
table.fc-border-separate, table.fc-border-separate.fc td, .fc th {
width: 91px !important;
height: 50px !important;
}
the column size and height is fixed.
Adding display: block didn't change anything but thank you for answering.
try to add display: block; or display: inline-block; to those selectors.
I have a table with class=list which outputs files that are uploaded in a server and it is created dynamically using php.The table is inside another div.The code is
<div class="list">
<table>....php code for table...</table>
</div>
I have positioned the div list in a fixed position.The css file is
.list{background:#66CDAA;width:20cm;position:fixed;top:3cm;left:11cm;}
The problem is that if table gets too big the page doen't scroll down. I have tried:
body{overflow:auto}
But it doesn't work.
As an alernative solution I know that I could add to .list
.list{overflow:auto;height:something;}
But then the list would have a fixed height which I don't want and also the table would scroll instead of the page.
So is there any alternative??
Try this:
<div class="listcontainer"><div class="list"><table>...</table></div></div>
CSS:
.listcontainer {
position: fixed;
width: 20em;
top: 3cm;
left: 11cm;
bottom: 3cm;
right: 11cm;
overflow: auto;
} /* adjust right and bottom to be what the maximum size should be */
.list {
background-color: #66cdaa;
max-height: 100%;
}