I have 2 tables using DataTable :
top: exact match
bottom : related
Here is what they look like right now.
As you can see that, there is no need to show the table header on the second table. I want to hide it.
I have tried using this on my CSS :
Since the class = inventory_related
.inventory_related table thead {
display:none;
}
I also tried to take off the whole :
<thead class="thin-border-bottom ">
<th>Catalog # </th>
<th>Description</th>
<th>Available Vials</th>
</thead>
This doesn't work either.
Anyone have any suggestion on how do I hide my 2nd table header ?
Thanks.
In my case, setting
.inventory_related thead {
display:none;
}
messed with column widths, while
.inventory_related thead {
visibility: collapse;
}
seems to be working.
<table>
<thead style='display:none;'>
<th>header 1</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 1</td>
<td>row value 2</td>
</tbody>
</table>
Please see the following code as an example:
.inventory_related thead {
display: none;
}
<table>
<thead>
<th>header 1</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 1</td>
<td>row value 2</td>
</tbody>
</table>
<table class='inventory_related'>
<thead>
<th>header</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 3</td>
<td>row value 4</td>
</tbody>
</table>
if the class of <table> is inventory_related then write the following css
.inventory_related thead {
display:none;
}
If you want to do it in jQuery(js) then you can simply do:
$("#datatableId").css("display", "none");
where 'datatableId' is the ID of your table or some div tag which contains the table.
Related
I'm using a Vuetify table with multiple columns like so
Reproduction link
<v-table>
<thead>
<tr>
<th v-for="index in 10">Header {{ index }}</th>
</tr>
</thead>
<tbody>
<tr v-for="rowIndex in 10">
<td v-for="columnIndex in 10">
<v-card>
<v-card-title>Cell in row {{ rowIndex }} in column {{ columnIndex }}</v-card-title>
</v-card>
</td>
</tr>
</tbody>
</v-table>
For smaller screen sizes the horizontal scrollbar is perfectly fine. But there is a "print mode" where horizontal scrollbars make no sense ( data loss on PDF file ). So regardless of the actual table width I would like to prevent a horizontal scrollbar ( I'm aware that this might look very ugly ). I think this problem is not related to Vuetify, I think this also applies for plain HTML.
I tried to disable the horizontal scrollbar via overflow-x: hidden;
div {
overflow-x: hidden;
}
td {
padding: 20px;
background: red;
}
<div>
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</thead>
<tbody>
<tr>
<td>I'm a cell in row 1 in column 1</td>
<td>I'm a cell in row 1 in column 2</td>
<td>I'm a cell in row 1 in column 3</td>
<td>I'm a cell in row 1 in column 4</td>
<td>I'm a cell in row 1 in column 5</td>
<td>I'm a cell in row 1 in column 6</td>
<td>I'm a cell in row 1 in column 7</td>
<td>I'm a cell in row 1 in column 8</td>
<td>I'm a cell in row 1 in column 9</td>
<td>I'm a cell in row 1 in column 10</td>
</tr>
</tbody>
</table>
</div>
but unfortunately that didn't help. As you can see there is some content loss on the right side.
Do you have any ideas how to tell the content to shrink as much as possible?
you need to apply css rules differently for print screen
#media print {
body {
overflow-x: visible
}
}
here body is the first parent element of table, you can apply it to the immediate parent of table and it will work in print mode.
overflow-x: visible property will print it adjusting the data in new line in print screen
I have a little problem with style sticky header in my data table. I wrote simple Angular component and specific directive:
sticky.directive.ts
#Directive({
selector: '[sticky]'
})
export class StickyDirective {
constructor(private _element: ElementRef, private _window: WindowRef) {
console.log('debug')
}
#HostListener('window:scroll', ['$event'])
handleScrollEvent(e) {
if (this._window.nativeWindow.pageYOffset > 100) {
this._element.nativeElement.classList.add('stick');
} else {
this._element.nativeElement.classList.remove('stick');
}
}
}
The purpose of the directive is to add a class stick if user scroll below header. As a result, table header should be visible for user, even if he scroll long table. stick class look like that:
.stick {
position: fixed;
top: 55px;
}
and part of my some.component.html (and use directive on thead element) look like:
<table class=" table table-bordered ">
<thead sticky>
<tr>
<th width="40%">Name
</th>
<th width="10%">Priority
</th>
<th width="25%">Date created
</th>
<th width="25%">Date modified
</th> </tr> </thead> <tbody> <tr *ngFor="let r of entitiesFiltered">
<td>
<div class="table-cell-flex">
<div class="cell-content">
{{r.name}}
</div>
</div>
</td>
<td>
<div class="table-cell-flex">
<div class="cell-content">
{{r.priority}}
</div>
</div>
</td>
...
My code meet basic functionality. It means that header stays in the same place during scroll page, but header width and columns width change. It's look like:
Question:
Anyone can tell me how can I should style my table, that fixed header does not change form/shape table? Is it possible?
you get width any columns with javaScript then setting to header with px in position fixed or absolute,
or with html and code:
<div class="table-wrapper content">
<!-- overall wrapper -->
<table>
<!-- header -->
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
</table>
</div>
<div class="table-body-wrapper" style="position: relative; overflow: visible;">
<!-- the element with the custom scrollbar -->
<table>
<!-- body -->
<tbody>
<!-- auto-generated data (see js function below) -->
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
</tr>
<tr>
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
<td>Row 5, Column 3</td>
</tr>
</tbody>
</table>
</div>
I faced the same issue.
In order to solve it, I created a simple hack where I set the fixed width of columns in sticky header and duplicated the sticky header under the table (in order to preserve the width of column names' content.
My solution is based on Bootstrap 4 and Angular 6.
example.component.html:
<table class="table">
<thead>
<tr>
<th #tableColumn1>Column 1</th>
<th #tableColumn2>Column 2</th>
<th #tableColumn3>Column 3</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let message of messages">
<td>{{ message.title }}</td>
<td>{{ message.author }}</td>
<td>{{ message.created_at }}</td>
</tr>
</tbody>
</table>
<table class="table" [class.d-none]="!showFixedTableHeader">
<thead>
<tr [class.sticky]="showFixedTableHeader">
<th [width]="tableColumn1.offsetWidth">Column 1</th>
<th [width]="tableColumn2.offsetWidth">Column 2</th>
<th [width]="tableColumn3.offsetWidth">Column 3</th>
</tr>
</thead>
</table>
example.component.ts
import {Component, HostListener} from '#angular/core';
#Component({
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
showFixedTableHeader: boolean = false;
#HostListener('window:scroll')
onScroll() {
const pageTopOffset = window.pageYOffset;
if (pageTopOffset > 285) {
this.showFixedTableHeader = true;
} else {
this.showFixedTableHeader = false;
}
}
#HostListener('window:resize')
onResize() {
// Do nothing.
// It will automatically trigger to update the bound properties in template.
}
}
example.component.css
tr.sticky {
top: 60px;
position: fixed;
z-index: 99;
}
I don't think you need the angular directive, it's overriding the styles, which specify the width, when it adds class "stick".
You can just fix the position of your table head and set a higher z-index on it so when it does scroll, the body doesn't show through.
See codepen example:
thead{
position:fixed;
z-index:2;
...
}
tbody{
position:absolute;
z-index:1;
...
}
https://codepen.io/ciammarino/pen/vmqzLL
I have just discovered:
position: sticky
https://developer.mozilla.org/fr/docs/Web/CSS/position#Positionnement_adh%C3%A9rent_(sticky)
I'm using bootstrap class .table-responsive and the table include an horizontal scrollbar sort of like this:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column ...</th>
<th>Column n</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column ...</td>
<td>Column n</td>
</tr>
</tbody>
</table>
</div>
but i need to make the headers and the first 3 columns freeze.
I've tried some fiddle, css tricks and stuff i find, but that ruins the .table-responsive it seem that those examples only work for tables that fits in 100% browser width.
Maybe this http://getbootstrap.com/css/#grid-example-basic can solve your problem.
<thead>
<tr>
<th class="col-md-1">Column 1</th>
<th class="col-md-1">Column 2</th>
<th class="col-md-1">Column 3</th>
<th>Column ...</th>
<th>Column n</th>
</tr>
</thead>
You can do it using <div > instead of table and you can easily fix the heading and also use display:table-cell;
i have a HTML table in which i want to make 1st Row fixed while i scroll, I'm able to make fixed Header Row but i also wanted my 1st Row of my table also be stay fixed. Its been 2 days I'm trying' with no success. Anybody out there had run into this kind a problem ?
<table>
<thead>
<tr>
<th>Header 1</th><th>Header 2</th> // this i have fixed already
</tr>
</thead>
<tbody>
<tr>....</tr> // this row i want to make fixed while i scroll.
<tr>....</tr>
</tbody>
</table>
JSFiddle till now i'hv got this from net
Table can have more than one tbody elements, so you can add this fixed row to first tbody, and rest rows to the second tbody. Then is just some play with css to set it right.
Working demo: http://jsfiddle.net/sMMZ9/4/
Demo is based on this solution
You need to insert first row inside the <thead> element and apply the same css as you have applied for th element:-
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</thead>
CSS
html > body thead.fixedHeader td {
width: 200px;
}
You can also add border as per your design.Hope it'll help you for sure.
How's this:
.scrollContent > tr:first-child{
position: fixed;
}
I have a table that uses thead and tbody. The table has border-spacing set, and in Chrome and Safari the space between the header row and the rest is doubled.
It was reported as an issue for Chrome late last year, but that's the only reference to this I can find.
Has anyone else had this, or know how to get around it?
<table style="border-spacing: 0 5px">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
It displays as expected (all rows equally spaced) in Firefox, not sure about IE.
thead th {position: relative; top: 5px;} will do it
That's not exactly "THE" solution, but you might want to take a look at here for a workaround which have worked with my specific case:
How to remove extra border spacing between TBODY elements?