I generally set fixed column widths via CSS with flawless results:
#tableID thead tr th:nth-child(1){width: 75px;}
#tableID thead tr th:nth-child(2){width: 75px;}
/* etc… */
But now I'm in a situation where I won't know the desired column widths until runtime. Here's an excerpt from the code I'm using to dynamically set the column widths:
var tr=$("<tr>");
var colArr=Home.ColDefs[this.statBatchType].colArr;
for(var i=0;i<colArr.length;i++){
var col=colArr[i];
tr.append(
$("<th>")
.html(col.title)
.css("width",col.width)
);
}
this.jqTHead.append(tr);
Sorry this code is a bit out of context but the bottom line is that I'm adding columns, represented by <th> elements, to a table header and setting each one's width.
What ACTUALLY happens, however, is that Firefox is treating the column width as a minimum and then automatically expanding the column width as the user expands his browser window. Consider a case where my JavaScript code sets the width of each column to 75px. Firefox will ensure each column is at least 75px wide, but if the user maximizes (or enlarges) his browser, provided there is sufficient room, each column will be automatically widened.
This is odd to me since the JavaScript code would seem to be the functional equivalent of what I was doing in CSS. Yet the CSS approach doesn't cause this odd behavior.
Any thoughts?
Fix the width of the <table> this will ensure the table does not take the available size and bump the layout.
table-layout: fixed; on the table does exactly this: columns never expand to fit their contents, and if you give the table itself a width, the extra space is divided equally. The contents of cells don't come into play at all.
Related
I have a Material UI Table below. All of the table's columns are fit sized to 205px. Table itself set to be 100% width. So when I load the page if there is available space table do get bigger. The problem is if there is not enough space columns need to shrink based on the text inside them but they don't. They are stuck at 205px width.
I removed all paddings no help either. Text inside the each cell is an input field so if I make the input field width and all cells 60px the width went down to 191 but it's still giving each cell way bigger width than they need so columns are way larger than they should be. I changed width of the table, width of the container all no help.
I have pretty much exact table structure as in this example here;
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table
If you see table columns unnecessarily too large in this example too. What's causing columns to be way larger than what they need to be? Why they're all identical fixed to some size?
The input in the table cells have a default width and are making the columns to be not shrinkable, Changing width of input to 100% might make input to take parents width.
https://codesandbox.io/s/optimistic-benz-ilnz2
By default, Tabulator reduces the max width of the table and displays a horizontal scroll bar at the bottom of the table. Is it possible to remove this scroll bar and force tabulator to increase the width of the table (so that the horizonta scrollbar is displayed at the bottom of the browser window)?
Add this to your CSS file for the div containing the horizontal scrollbar.
overflow-x: hidden;
To make the table wider, you can enclose it within a <div> and add this to the CSS file for that particular div.
table-layout: fixed;
width: 100%;
Update
As of Tabulator v4.7 there is a built in layout mode for handling this. the fitDataTable layout mode will fit the width table to its contents:
var table = new Tabulator("#example-table", {
layout:"fitDataTable",
});
See the Layout Documentation for full details and a working example
Original Answer
There is no built in feature for allowing external scrolling of the table. The table is based in a div and so will take up 100% the width of its parent element.
It will then either handle scrolling inside the table or resize the columns to fit depending on how your table is configured.
You could make some CSS tweaks to allow this form of display but it may cause the table to malfunction under certain circumstance, depending on your configuration.
You would need to include the following CSS after the tabulator style sheet has been included:
.tabulator, .tabulator-header, .tabulator-tableHolder{
overflow:visible !important;
}
But essentially at that point you may be better off just using a standard HTML table as you seem to be disabling a lot of the features that you would use Tabulator for.
I have a <table> element with a lot of rows and a max-height attribute.
I need to find the real height displayed for the <tbody> element. Normally I can just take the difference between <table> height and <thead> height
var tbodyDispalyHeight = $("table").height() - $("thead").height();
This works unless horizontal content is too much and an horizontal scrollbar appears (and can't remove it because... I need it!). I should remove its height from tbodyDispalyHeight but... how can I do?
First problem: I don't really know when this bar is displayed
Second prolbem: Each browser implement scrollbar in a different way
Here is a JSBIN example to understand what I mean. Try to resize page horizontally until the scrollbar appears, there the dislayed tbody height should be lower...
Sounds like you are looking for the clientHeight.
(But this seems to be to easy.)
Have a look to MDN
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
You may try:
$("table")[0].clientHeight
Currently you have your table with overflow:auto. But you could wrap it with a DIV with "overflow:auto". Then you can simply determine if you have a horizontal scrollbar by comparing the width of your div with the width of your table.
I am doing some manipulations on td tags using jQuery - I'm setting their width to be the same as the width of a td in another table (actually this is a fixed-header-table plugin, so I have to tables - one for the header and one for the main content. The corresponding ths and tds should have the same width).
The problem
All calculatinos work fine if I look at 'Computed style' in Chrome - the widths are set properly.
However, the real width is different than the 'computed width'!
See this picture of the computed style of the td element:
Now you may think that the actual width of the element will be 1+1+96+1+1 = 100, but it is 99!
I found this question - Computed column width is different than css declared width for column. How does browser decide width? and following the advice I used table-layout: fixed;. I used border-collapse: collapse;, either, in order to remove the space between the columns, so I don't expect this will be the problem.
The code
Here is a part of my code which sets the td widths:
$('thead th, tbody tr:first td').each(function(i, el){
i %= col_count; // I'm using because we go through 2 lines.
// It shows at which td we are. */
// col_width is an array with already calculated
// widths (using .outerWidth()) for each column */
// if the needed width is the same as the current td's,
// we can go to the next td */
if(col_width[i] == $(this).outerWidth()) return 1;
// the width to be set with substracted borders and paddings
// (here we don't have margins)
var new_width = col_width[i] - ($(this).outerWidth() - $(this).width());
$(this).width(new_width);
// I have also tried this, but the result was the same:
// $(this).css('width', new_width + 'px');
});
I should notice that thead th and tbody td are from different tables (as I mentioned before)
Another try
Another thing I tried - adding one pixel to each column - $(this).width(new_width + 1);. And on the demo page it worked. I copied the new code to the real page and on the almost all tables it worked! There was only one table where there was a problem.
It proved that the container (where the table was in), was not wide enough, so the scrollbar "made" the columns shorter. Of course, I expanded the container's width. The problem disappeared.
The real question
And while asking (writing) this long question, I solved it! So now it is changing a little bit: why?
Why when I added one extra pixel, the problem disappeared? Why the computed width is different from the real width?
Of course, I will be happy if you provide me another, more professional solution :)
JSFIDDLE (with already set widths, copied from the chrome console). Resize the result box to see the whole table properly.
The difference in computed width and real width is due to the use of border-collapse: collapse.
border-collapse: collapse
Borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored)
This reduces the width by 1px for each of the td elements, since each has had its border reduced to a single border.
Computed width is different from real width because every element has 1px border and 1 px white space in left and right, same as top and bottom.
I have a html table and I want to freeze the header row th tag for scrolling the data. How I can do that? Does I need to use the Dom?
Thanks !!
My solution is to use two tables and fix the column widths. The lower table is in a scrollable div and has no header.
If you take Accessibility seriously, two tables is not the way to go since it breaks rules.
There are ways to do it in pure CSS, but it is a headache to get it to work in all browsers. There are a few examples out on the net, but they do not all work 100% with IE without tweaks.
I am currently working on a CSS only version, this is getting pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825
Does not work in IE8rc1 yet, IE6/7 has a border issue and you have to live with the scrollbar looking different in FF vs IE.
With FireFox, you can put style="height: 200px; overflow-y: auto" But to have a pure CSS version compatible with all major browsers, I've use this example since IE doesn't support syles in tbody or thead.
I have come up with a solution that sort of combines two previously mentioned ones. It uses jQuery and two tables , one for the header and one for the content. The header table is set to a width of 100% with no column widths set. At the bottom of the content table there is a row defined to match the header table with the column widths set. This row is hidden so that it is not shown, but retains the column widths.
For this example I gave my header row an ID of 'Header1' and the bottom row and ID of 'Header2'. Also I wrapped the content table inside a div with an ID of 'scrollTable'.
I set styles in my CSS file for the scrollTable ID, see below:
#scrollTable {
height:250px;
overflow-x:hidden;
overflow-y:scroll;
}
Now for the jQuery part. Basically what I'm doing here is taking the widths of the bottom row columns and setting the header columns to match. I stretch the width of the last column of the header so that it fits over the top of the scroll bar. See code below:
$(document).ready(function(){
var maxWidth = $('#Header1').width(); // Get max row Width
$('#Header2 th').each(function(i) { // Set col headers widths to to match col widths
var width = $(this).width();
$('#Header1 th').eq(i).width(width);
});
var blankSpace = maxWidth - $('#Header1').width(); // Calculate extra space
$('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace ); // Stretch last header column to fill remaining space
});
I have tested this successfully on IE 6, 7 & 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10, and Safari 3.2.2 on Windows XP.
I've done it in the past using CSS by defining a height for the <TBODY> tag on my table, and using overflow:auto. This was a while ago, and I think there were some compatability problems. I don't remember precisely what they were, but this solution may work for your problem.
the best solution (the one that scales with lots of data) is to use 2 tables like aaron said, the top table has the headers, and the bottom table should have the headers as the last row (or the footer), but with opacity of 0, so that you cannot see them.
This the headers at the bottom make the bottom table have the same column widths as the top table, making things line up. make sure you style both header and footer the same.
you will also have to create a seperate scroll bar for vertical scrolling to the right of the table, because otherwise the scroll bar will mess up your widths. add a scroll event listener to set the scrolltop of the table to the scrolltop of the scrollbar, and resize the scroll bar to be the same height as the table.
its pretty easy, actually =)
Create a single table as you normally would to meet accessibility concerns. Dynamically create a new table based on the thead using jQuery (copy the thead) and inject it into the page above the first table and give it the fixed position. It should stay in place while the rest of the table scrolls, but it will still remain accessible and work with JavaScript disabled.
Have you tried this plugin from JQuery ? http://plugins.jquery.com/project/floatobject
I believe this does what you want. Check out the demo # http://amirharel.com/labs/fo/float_demo.html
Cheers!