We Keep Coding

Display DataTables columns at natural width

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.

Need to get HTML Element's Layout information just like Firefox's debugger

I have a aspx.net grid control and i'm trying to copy the grid control's first row information into another table java script.
I'm getting width of each cell by parsing through the grid control's first row using the following code:
gridCtrl.rows[0].cells[x].clientWidth
where x is 1 to last cell
But some how the width doesn't match the width display by Firefox's layout width.
I tried debugging Firefox debugger and explored all the attributes to see if i mix match margin, padding, width etc to get the width displayed by the Firefox's Layout width.
But so far no luck.
I'm wonder any of the experts in the field could provide some help.
I'm looking for Something similar to the layout information provided by the Firefox debugger.
I want to get individual elements like
elements margin, border, padding and the actual width of element.
[Sorry since this is my first post i'm not allowed to post a pic, But if you open fire fox browser and hit F12 and select HTML/Layout. you will see the layout information i'm talking about]
Any help is appreciated.
Thanks,

I can't comment so I must post as a reply :(.
I think that the problem is that the element might have a width set initially, let's say 50px, but it can also adjust based on the amount of text in it. In this case, you should not get the rendered dimension because that one differs from browser to browser.
Also another problem that is see is if the element has a min-width and dynamic width based on the viewport's size. In this case it would not work either.
If I am correct your solution would be to write a JavaScript code that sends you the information.

How to change the height of individual row in a HTML table using row border?

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.

Automatic table layout and colspan

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.

Copying Cell Widths to a Fixed-Position Clone Table

By generalizing the code in this SO answer, I've created a small jQuery plug-in which makes it easy to set up a scrolling header on any table - that is, when you scroll down such that the table header would normally be outside of the viewable window, a clone of the header becomes fixed to the top of the window so that you can see which columns are which. That's all working fine, but the problem I'm having is that I can't get the column widths to match up perfectly between the clone table and the original table.
I've created a jsFiddle which demonstrates the problem here. The gist of it is that I'm using the following loop to copy cell widths from the parent table to the clone table:
$("#tbl1").find('tr').first().children().each(function(i, e)
{
$($("#tbl1_clone").find('tr').children()[i]).width($(e).width());
});
This is necessary because the clone table only consists of the parent table's header; it has none of the content, therefore its column widths would be different than the parent table's without this step. However, this loop doesn't quite work properly. The cell widths in the cloned table are always off by a few pixels. This happens in both IE8 and Chrome (and presumably others, though I haven't tested them.)
I'm at a complete loss as to how to correct this problem. Please check out the jsFiddle, as it explains the problem much better than I have.
It's perhaps worth noting that the same code seems to work when the clone table's position is not fixed. However, that's of no use to me, since I need it to be fixed.

For some reason, the width attribute on your cloned table is throwing off the calculations. I'm not exactly sure why but if you use:
$("#tbl1_clone").removeAttr('style');
at the end of your jquery code like, here, it seems to work.

I know this question is really old... but I stumbled upon it with a similar issue, figured I'd add an answer just for reference.
It took me about a week to realize that switching from getting the Element.offsetWidth() to getting the Element.getBoundingClientRect().width fixed my problem completely.
I'm not sure about jQuery... but I'm using plain JS to do the same thing here (clone my table header and copy the widths over) and I was having weird width issues that weren't making any sense... this fixed it completely.
Apparently Element.getBoundingClientRect().width will get the width to the neariest fraction, while Element.offsetWidth() will round it off to the nearest whole number.
You can view this answer for more information (they'll explain it better than I can right now): How do I retrieve an HTML element's actual width and height?

Try using offsetWidth, something like...
// make each cell width in the header table, the same width as
// the cells in the orginal table (header table has one row)
$headerTable.find('td, th').each(function(index)
{
var width = originalTable.rows[0].cells[index].offsetWidth
this.width = width;
});