I'm working with the DataTables library, and I'm using the autoWidth option to have DataTables set column widths automatically, as well as the Scroller plugin to fix headers and page data from the server.
This combination looks beautiful when my table has a large number of columns, but when it has just a few columns, the autoWidth setting makes them cartoonishly large.
Here's an example:
http://live.datatables.net/rizuvaza/2/edit
What I'd like is for the table to be only as wide as necessary for its content, and no wider. Sometimes this will mean that the content is too wide for the viewport and must be horizontally scrolled, and sometimes this will mean that the content is narrower than the viewport, in which case I don't want it to consume the whole horizontal space.
I've found a couple of approaches that work if I'm willing to hard-code a maximum width for the table, but doing so relies on me writing code to estimate the width of the columns myself. Obviously this is dependent on a wide variety of difficult measurements (font size, content width, etc) that I'd really rather leave up to DataTables.
Is there some way to configure DataTables, or use wrapping DOM elements and styles, such that it will always draw a table using only the width necessary?
Well - dont know if that it was you are looking for - but if you set
#example {
display: block;
}
and run a columns().adjust() right after initialisation
var table = $('#example')
.DataTable()
.columns()
.adjust()
.draw();
then the columns will be shrinked to the absolute minimum size.
demo -> http://jsfiddle.net/j5h9ob12/1/
Update, edited titles in the fiddle to emphasize the point.
Related
I am trying to make this table that I am working on more responsive and visually appealing. I am using react.js. My table component has varying number of columns based on the data, so some tables I am finding it difficult to fit the information on the page without having resorting to horizontal scroll, or possibly things like the headers and the icons in the th's collide with one another. Initially I set a min width for the table so that the headers don't collide but that automatically made the table wider than it had to be causing immediate horizontal scroll.
Got this image from https://css-tricks.com/accessible-simple-responsive-tables/, looking to have the table initially with the squish method (no minimum width, just 100% width), but try to determine what min-width would be needed for the table not to collide on itself with a horizontal scroll. So maybe dynamically set a media query (if that's possible?) or open to other suggestions.
Here I set a minwidth for the table but even at full screen it goes straight to a horizontal scroll.
Here I removed the min width made the table 100% width and this would be ideal at full screen but when there are more columns or at smaller viewpoints it causes it to squish up to a point where it's unreadable.
Here I have a table with even more columns but even at 1461px screen width it starts overflowing. I also need to avoid having to break words in the headers.
Was hoping to learn to see if
There was a way to know at what screen size the column headers will overflow
If there is a way to dynamically set a media query to allow a min width at that point for horizontal scroll?
Or if I am just going about this the wrong way if there is a better way to address this? I would like to avoid collapsing columns if possible.
BACKGROUND: I have a jQuery datatable on my website that I want to look, act, and feel like a table on desktop sizes. When it hits a small screen size (as definied by Foundation - 39.9375em), I want to hide the header and footer (which I already basically figured out) and have the first column take up the full width of the page and force all the other columns to a child row. The other columns just have buttons/links that take you to other pages having to do with the name of the row. Things like settings, status, etc.
QUESTION: How do I force the column to take up the full width?
WHAT I'VE ALREADY TRIED: I tried setting white-space: nowrap, but then it just responsive hides the whole column and then I'm left with literally just the control thing. So it's like an accordion. I tried to look up how to force the other columns to be hidden responsively, but I couldn't find anything and I can't think of any way to do it myself.
Thanks in advance!
After some playing around, I found a solution on this page of the datatables documentation: https://datatables.net/extensions/responsive/classes. For all of the columns except the title column, I simply put className: 'min-tablet-l'. That way, as soon as we hit landscape tablet size, the columns are automatically thrown into the child row and the control turns up that lets me show/hide it is shown too.
​Hello,
It seems that table row height of UI5 Table is pretty big with lot of white space above and below the text.
Is there anyway I can resize the height of the row with lesser px? I want to apply this seeting only for this table and not all tables.
When I look at its CSS in Chrome Developer tools, I get following:
element.style{height: 49px} is the culprit. How can I make it like 30 px and can apply only to this table?
Thanks !
From the looks of it I believe you are using the sap.ui.table.Table. You can use the rowHeight property of the control to reduce the row height.
Try using sapUiSizeCompact style in your page or your table. You cannot set exact height with this one but it might be enough for your case.
class="sapUiSizeCompact"
I am looking for a way to be able to change the height of a row in a table, not to a preset size if possible, by selecting the row border and dragging it.
The scenario is as follows:
I have certain data being represented in the rows of the tables. Depending on the height of the row, the representation of the data may vary i.e. it might be a summary of the data if the row height is small, but may be the detailed description if the height is beyond a certain size. I want to be able to select the row in question and drag it to change its height.
If free flow change is not possible for some reason, I can make do with 3 levels of height. Scenario being, if i drag the row height beyond set limit x, it snaps to the next higher limit x'.
I understand you can change the size of the table elements/rows using css/js to fit predefined conditions, but I was unable to find anything to suit my needs.
In normal case( without use of plugins) , it is not possible to make a row of table re sizable with mouse. So, alternatively you can implement the rows using CSS. You can check the jsfiddle that i have create dfo you here. http://jsfiddle.net/sakirullahi/Npuyc/5/
In this i have used resizable event in jquery.
I'm creating an app which allows the user to manipulate a table structure by adding and removing columns and rows, setting column widths and cell colspans, and inserting elements into table cells. While testing, I came across a scenario in which Firefox 4 and Internet Explorer 8 render the table in the way I expect it to be rendered and Google Chrome 11 doesn't. I'm using table-layout: auto and I am aware that CSS does not specify a rendering algorithm to be used in this case (http://www.w3.org/TR/CSS21/tables.html, section 17.5.2.2). Nonetheless, I'd like to have consistent views in the three mentioned browsers, if possible.
Here's a very simple scenario to illustrate the different rendering (try it in Chrome and Firefox/IE to see the difference): http://jsbin.com/ayuja4/3
Even though the table is wide enough to contain the blue div (because the first column is set to 200 px and the second column, although having a width of 100 px, must expand to 300 px to contain the green div), in Chrome the first column is widened beyond its 200 px. This results in extra, unnecessary space in the last row, which is precisely what I'm trying to avoid.
Any ideas to make this table look the same in Chrome as it does in Firefox and Internet Explorer? I don't need a pure HTML/CSS approach - manipulating the table with JavaScript is a valid option, if it solves my problem. I'm already considering using fixed table layout, but this will result in extra effort to handle elements that are wider than columns, so it's a last resort.
If you make the divs inside the table display as cells with table div {display:table-cell;} you'll get the same results. Also, the way you're going about it now is leaving a 1px gap because the 500px element doesn't get the 1px border calculated into it.
I actually took a second look at it, and if you use min-width instead of width it'll work that way too.