So I have two tables horizontally next to each other. Everything is aligned initially. However, when the element inside one cell of the left table increases in size, it wraps and increases the cell height. How can I align two tables even with the left cell height increased?
Here is the image of what it looks like:
Without wrapping:
With wrapping:
IMHO you have two options.
Use single table so that entire row will have same height. Or
Use div instead of table because div has overflow option. Refer this link
Update after comment:
If you can use jquery, you could do it on page load. Refer this fiddler
Note: height attributes for both table's row and class name. Un-comment jquery line number 3 and execute.
Related
We are designing HTML pages for print and one of the requirements for tables is, whenever a page or column break occurs, to generate an indicator like "Continues..." below the table before the break (page or column) and in the header of the continuation of the table, another indication, like table title and the text "Continued", followed by the normal flow of the content.
For the top-level container, we are planning to use CSS multi-columns and normal html table element for the table. It seems CSS columns do not expose any pseudo-classes to decorate the column breaks.
Below is the layout I'm looking for,
Here's how I'd approach it:
Put hidden div above table
<div id="cont-label" style="display:none;">Continues...</div>
Know table size
By either sending its size to UI, or getting its size usign javascript:
var size= $('#mytable tr').length;
size is saved in javascript or in table div data attribute data-size=12
Know if table is "chopped"
If table on home is displaying a number of rows that's less than table size, either by counting rows or by having fixed number of rows displayed (depends on your design). Let's say displayed size is displayedSize.
Compare and act
Better to be in jQuery
Get both size and displayedSize and compare:
if( displayedSize < size ){
$("#cont-label").show();
}
I will assume that the next page will always show the text "Continued" because otherwise why have full page for table in the first place. I see you display the whole table and not the chopped part only ad this makes implementation easier, please correct me.
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.
What I have:
An html table which can be dynamically enlarged by clicking two buttons: to add row and column.
two one-row and one-column tables. One above and one to the left side of the table. These two tables are expanded simultaneously with the main table. When I add new row, left table ads new cell. When I add new column, top table ads new cell;
two mentioned tables are hidden.
What I need:
when I hover over a particular cell in main table, it(hovering) should trigger appearance of relevant cells in tables above and to the left. For example, if I hover over cell in row 2, column 2(of the main table) it should show cell 2 in top table and cell 2 in left table.
So I need somehow to connect selected cell with the same cells in other tables and show them on hover.
And I need to be able to move the pointer on the appeared cell to click it (it should not disappear when I move cursor from the main table to this cell)
The harder version of what I need supposes that hidden cells will not appear if only 1 row or column are left in the main table.
It will look like this:
Picture of the task
Since CSS allows to select on hover only elements that are inside one div or are siblings, I assume that this can be done only with JQuery.
I am using this code to show an entire hidden table on hover over the main table:
$('#my-table').hover(function() {
$('#dell-row').removeClass('hoverstate');
}, function() {
$('#dell-row').addClass('hoverstate');
});
Now I think that I need to replace #my-table with the selector of the cell in #my-table table and #dell-row with the selector of the corresponding cell in #dell-row table. Any ideas how I can do this?
I can not indicate static coordinates of the cells because the table is dynamically changing.
Please take a look at the working demo with all the html, css and JS code here.
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
}
I implemented a function which is able to show/hide the content of a table row or column with a sliding animation.
What the code does:
Retrieve all cells of the column (th, td)
Wrap the content of each cell in a <div class="wrapper" />
Animate the width of the wrapper div with jQuery.animate();
After finishing, unwrap the cell contents (remove the div)
The reason why I need the wrapping div is because jQuery can't perform a slide animation on table cells directly - see How to Use slideDown (or show) function on a table row?
See this codepen for the code and demonstration. I removed as much JS code as possible to demonstrate my problem. (You can ignore the html and css, they don't contain relevant information)
Everything works perfectly for rows and columns, in except of one (two?) problems:
When a column is shrinked, the content eventually starts wrapping when there's not enough space left. When this happens, the cell height suddenly increases, resulting in an ugly jump.
When a cell content doesn't need the whole space of it's cell, the show-animation for this content is faster, resulting in ugly output.
What I want to achive is a constantly changing width without affecting the layout. The other columns must not be affected.
Any ideas how I can achieve that?
You could nest your div in another div with overflow hidden:
.crop {
overflow:hidden;
width:100px
}
.inner {
min-width:300px;
width:auto;
}
http://jsfiddle.net/mikatalk/7xwLjp2e/