I'm creating my first table using HTML and CSS. I used a code generator to create the table "code" (HTML and CSS). I add all of that to a long string and send it to MailApp.sendEmail to include the table in the Email. It works great except that the report lines are too spaced out vertically. I need help reducing the row height or otherwise reducing the vertical spacing. I'd include some of my HTML and CSS but I can't figure out how to put in a format that this freak'n window will accept.
Can someone advise on how to reduce the vertical row spacing in a CSS table?
Try this:
tr { line-height: 5px; }
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 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/
I have an HTML page that has static tables placed in the page because these never change. I have a main table that houses all the elements to keep everything aligned. This is probably what is causing the problem.
I have the main table with 2 tables within it. Each row in the first inner table, called dropDownTable, usually has up to about 10 rows. dropDownTable is in the following format:
td1: text; td2: select element; td3: text (this part is dynamically updated).
The second table, called showDetails, uses the options from the select element in the rows in dropDownTable to query a database (onchange attribute), get some information and then display each element that is found. The response from the database is up to 150 character strings, usually shorter though.The user then clicks an element in the details that updates the third column in the dropDownTable.
I'm not really sure if this is a JavaScript or HTML problem but each time the showDetails table updates, it pushes the bottom of the main table down. There are 2 buttons at the bottom of the main table that move each time the user changes the select in the second column of dropDownTable.
It very aesthetically displeasing.
Any ideas would be greatly appreciated. I have had this problem before but with other elements.
are you adding more content, thus making the table taller?
I cant quite understand what your problem is exactly, but:
td
{
vertical-align: top;
}
will keep everything in the top of its cell, rather than centering to the tallest column.
You shouldnt be using tables for layout, tables are for tabular data. have a read of this
if you want to fix the heght of the table, do:
table
{
height: 400px; /* replace with your heihgt */
}
My table has static width values but sometimes table cells of a certain column can contain text which is too long and which messes up the table's width. I'm looking for a way to dynamically shorten text (kind of like a table grid functionality but then without grids) because it can be of a variable length, and when one hovers over the table cell the entire text is shown without stretching the table.
Currently, I have this hard coded in my script in the following way:
string.substring(0, 65) + '...'; and passing the full text to the 'title' attribute of the table cell.
Note that I don't want to keep using the 'title' attribute. I tried surrounding the text with <span style='position: absolute; background: #EEE'></span> when triggered by the hovering event, but unfortunately that wasn't an appealing solution as the text moved a bit to the bottom while the padding nor the margin style were changed.
The solution can also be a jQuery plugin or JavaScript script.
1. Shortening the original data
I suggest that you consider something more elegant than chopping the string at the 65th character. -- Instead, look for whitespace to break the string at. Only chop mid-word if no whitespace is found.
To save more room in the table cell, use the ellipses character… instead of three periods... Just copy/paste it from this answer. The ellipses character could also be styled with a different or smaller font.
2. Showing the original data on hover
I prefer YUI. Their tooltip widget works well for this. An example.
You should try this CSS instruction:
td { break-word: word-wrap; }
that works in many browsers (yes, including IE 6, even IE 5.5 but not Fx 3.0. It's only recognized by Fx3.5+. Also good for Saf, Chr and Op but I don't know the exact version for these ones) and don't do any harm in the other ones.
If table's width is still messed up, there is also:
table { table-layout: fixed; }
th, td { width: some_value; }
that will force the browser to use the other table algorithm, the one where it doesn't try to adapt many situations including awkward ones but stick to what the stylesheet says.
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!