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
Related
I have a table, where the left-most cell spans the entire height of the tbody via rowspan. The content of this cell can need more height than the rest of the table. I want the height of the rows to the right of the rowspanned cell to be evenly distributed over the height of the table.
In Firefox and IE it works as intended, but in Chrome I have whitespace above the topmost row:
As you can see in the grayed line, Chrome has unused whitespace above the gray line. This only happens when the left cell has content which needs more height than the combined height of the other cells.
Code of the table used:
<html>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">Multiline<br>text<br>longer<br>than<br>rows</td>
</tr>
<tr style="background-color:gray">
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
</tbody>
</table>
</body>
</html>
I tried cheating the renderer by setting the height of the first tr (which only contains the rowspanned cell) to 0px, but Chrome doesn't like a height of 0. It only reacts to the height definition, when it is at least set to 1px.
Question: Does anybody have an idea how to make Chrome behave like FF and IE?
P.S.: The idea of setting the rowspanned cell in its own line was a result of some other question here on SO by someone else in the past, which solved another problem I had back then. (By accident I didn't test this particular page in Chrome back then, so I don't have an exact memory now of which problem I solved with this back then. Sorry.)
Your rowspan cell and the top Bla cells should be in the same row. Then you only have 3 rows in the table so change to rowspan=3.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Multiline<br>text<br>longer<br>than<br>rows<br>a<br>b</td>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
</tbody>
</table>
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)
This is an assignment question.
The table above is what I need to make. The table below is what I came up with:
My code:
<!DOCTYPE html>
<html>
<head>
<title>Question Two</title>
<meta charset="UTF-8">
</head>
<body>
<h2>Nested Tables</h2>
<table border="1">
<tr>
<th>Header column 1</th>
<th>Header column 2</th>
<th>Header column 3</th>
<th>Header column 4</th>
</tr>
<tr>
<td>Row 2 - Item 1</td>
<td>Row 2 - Item 2</td>
<td rowspan="2">
<h4>Row 2: Nested Table 1</h4>
<table border="1">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 3 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 2 - Item 4<br/>A second line</td>
</tr>
<tr>
<td>
<h4>Row 3: Nested Table 2</h4>
<table border=1>
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 3 - Item 2</td>
<td rowspan="2">Row 3 - Item 3</td>
</tr>
<tr>
<td>Row 4 - Item 1</td>
<td>Row 4 - Item 2</td>
<td>Row 4 - Item 3</td>
</tr>
<tr>
<td colspan="4">Row 5 - Last row of outer table</td>
</tr>
</table>
</body>
</html>
Two things are different: the font and line spacing of Nested Table 1 and 2.
As per the font, is there a way to set a default font for all HTML documents to use? If so, how?
For the spacing, I have no idea. I tried all kinds of combinations of <br>, <pre>, <div>.. etc. I'm pretty sure it's not a browser issue that caused the erroneous result (tried multiple browsers--I'm using IE, running on Windows 7). Any ideas?
Thank you.
This is just a wild guess but the font you're looking for may be "Calibri" or something very similar. You can add the font-family as an inline style to your body tag and everything in the table will inherit the font.
<body style="font-family:Calibri;"> and here's a demo of it in action.
The spacing seems fine as is, however if you need to make adjustments you can do so with padding, margin, or even cellpadding.
This will pad the space in all the cells by 10: <table border="1" cellpadding="10">
This will pad the top of the cell by 10px: <td rowspan="2" style="padding-top:10px;">
As per the font, is there a way to set a default font for all HTML documents to use? If so, how?
If it's something for "all HTML documents" to use, then it would be a browser setting. You're probably on your own for that one. But if you want something for all of the content in this document to use, that's easy with CSS. Something like this:
<style>
body {
font-family: Arial;
font-size: 1em;
color: #000;
}
</style>
Putting that in the head of the HTML would apply that styling to the entire contents of the body tag, including all descendants. (You can also put the CSS code in a separate file and use a <link> tag to reference it in the head. As the code grows in complexity, this quickly becomes a preferred approach.)
For the spacing, I have no idea. I tried all kinds of combinations of <br>, <pre>, <div>.. etc.
I'd use CSS for this as well. First, identify the element(s) you want to target. An id or a class is often a good approach. For example:
<td rowspan="2" id="column3Cell">
Then in the CSS you can target that element and apply styling to it:
#column3Cell {
padding-top: 10px;
}
Adjust as necessary. Since the goal here is to replicate a screen shot as exactly as possible, approximating it is going to take some tweaking and trial-and-error. But there is a lot you can do with CSS styles here.
<table border="1">
<thead>
<th>Header Column 1</th>
<th>Header Column 2</th>
<th>Header Column 3</th>
<th>Header Column 4</th>
</thead>
<tbody>
<tr>
<td rowspan="">Row 2 - Item 1</td>
<td>Row 2 -Item 2</td>
<td rowspan="2">Row 2 : Nested Table1
<br>
<br>
<table border="1">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 3 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 2 : Item 4 <br> A second Line</td>
</tr>
<tr>
<td>
<br>
Row 3- Nested Table 2
<br>
<br>
<table border="1">
<tr>
<th>Row 1 Header</th>
<td>item</td>
</tr>
<tr>
<th>Row 2 Header</th>
<td>item</td>
</tr>
</table>
</td>
<td>Row 3 -item 2</td>
<td rowspan="2">Row 3 - Item 3</td>
</tr>
<tr>
<td>Row 4 - item 1 </td>
<td>Row 4 - item 2</td>
<td>Row 4 - item 3 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Row 5-Last row of outer table</td>
</tr>
</tfoot>
</table>
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.
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;
}