Develop Reference

Align cell heights in parallel tables

I have two tables sit next to each other and display data about two items that are being compared. Each item has a name, a category, and then a description - some descriptions (the third column) are very short (one word) and some are very long (multiple sentences). I need to align the two tables so that the row heights match up perfectly. Here's what I have so far:
Notice how the first row in each table doesn't align because of the difference in heights in the row. Ideally I'd love to solve this with CSS and some kind of overflow property combined with min-height, but I'm not sure where to start. Thanks!

You can place the description text (2nd table) inside a "div" in "td" and
make the "div" css: "overflow:auto; max-height:40%"; and make changes to the width of the table data as required for the both tables.

You can use the height property to give each cell in the table a uniform height.
Setting the overflow-wrap property to break-word will break a long word that does not fit inside the cell (like supercalifragilisticexpialidocious) so it fits. You need to style it as an inline-block so the overflow works properly. If all else fails and there is just too much darn text in a table cell, you could set overflow to hidden to make sure that your users can at least see the content without it spilling over everything, but ideally you should set the height to be large enough for your data. If you need an example, let me know and I can post one.

Is there way to render <table> horizontally when the list exceeds certain length?

I created a visualization with d3
http://jbk1109.github.io/tennisMapWithPlayersListOnHover.html
When mouse hovers over the histogram, a list appears underneath. There are a couple cases when the list becomes too long and I would like the table to grow horizontally beyond certain length.
Is there an optimal way to do this other than checking the length of list and appending a new table element?

Nice job Brian! I would try to get viewport height with jQuery, and compare it witch table height, something like:
if(table_height > viewport_height) {
// change table css style to 2 column table
}

Col in table colgroup is getting hidden

I'm trying to develop a fixed header table.It is a kind of widget, where use will be allowed to set width to columns whichever he wants.
Scenario:
Table(width is set to 500px) has four columns where if we don't specify width at col tag level,all columns are optimized to total table width like this:
If we specify width to 2 columns at col level whose total width is less than table width, then table looks like as follow:
But, if width of the 2 columns are greater than table width, then remaining columns are getting hidden, though table wrapper(<div class="v-grid-content">) has overflow:auto.Scrolling is enabled but only two fields are shown:
I am not getting what is wrong, can somebody help. Here is the jsfiddle.
I tried to keep min-width to col,but that didn't work.
Do we need to set width to every col??

Do we need to set width to every col?
No, you don't. You can set a width to some – any other column widths will get computed by the browser as usual. (Taking into account the widest content of that column and the overall table width.)

Forcing <table> Columns to a Fixed Width; Prevent Automatic Expand

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.

How can I programmatically set the width of a column in Slickgrid?

I'm using SlickGid 2.0 and I'd like to be able to set the width of each column based on the longest string contained in the column. I'm fine calculating the required width, but I cannot figure out how to set the width of a column outside of faking a drag event. Is there any other way to individually set the widths of columns in SlickGrid?

According to comments in the source code, you can set model[cell].width to adjust the width of individual columns.
See comments here:
http://code.google.com/p/slickgrid/source/browse/trunk/slick.grid.js?r=9