I have a table that is being generated by means of a loop.
Each loop creates 2 rows of the table.
What I want to achieve is when this page is printed the the 2 rows created in each loop iteration stay together and do not get split over a page boundary.
I have tried applying the CSS rule {page-break-inside: avoid;} on both the tr and td elements with not much luck (I hear this is an known issue with non-block elements).
Apart from rebuilding the view using divs, is there a solution that I can apply to the table?
You need to combine these two styles together (although auto is the default value)
if those two rows are supposed to attach together, you might consider using a single table for each of those two rows instead of having a single table for all rows.
{page-break-inside: avoid;page-break-before:auto}
Also check comments for this answer
The discovery of the styles page-break-inside: avoid; page-break-before: auto was very useful to me when looking for a way to do exactly this. However, I found a way of making it work without having to use separate tables. Wrap each set of rows that you want to keep together in a <tbody> element, and give that element the two styles that control page breaks. As far as I can tell, that has exactly the desired effect: if the printed document is split across multiple pages, the rows within each <tbody> element will always appear on the same page.
Unfortunately CSS page break properties are not always reliable across all browsers and platforms.
For a more sure-fire approach, as AaA mentions, I find it better to wrap the rows that you don't want split into a table of their own.
Like so:
<table>
<thead>
//headers
</thead>
<tbody>
<tr> //Create your for loop on this element
<td>
<table>
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Each table can be more reliably kept together as needed, and the table can have as many rows and columns needed.
Related
I'm a newb to CSS. I have a page that where an html table is generated at runtime by a bunch of tags. However,data is generated only in one of those cells and the adjacent cells end up being empty.
<tr>
<td> Really long data that is forced to wrap around.</td>
<td> empty cell</td>
<td empty cell </td>
</tr>
Is there a clean(cross browser compatible) way to get the first cell to span multiple columns via CSS without force a wrap around. Ideally, one would set the colspan on the first cell to get it to stretch multiple cells but since the html is generated on the server, this isnt much of an option.
This is the closest set of solution Ive found to my question and it doesnt seem to solve the problem.
Looks like you are trying to use tables for presentation, rather than tabular content. You should give a look into display: flexbox which may help you achieve the effect you want.
Here is a great tutorial https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am working on some custom pagination which often leads to a "last page" having less than the max number of rows. I would like to keep the webpage mostly static when the table drops some or most of its rows. i.e. scrollbar should keep to the same length.
To rebuild the contents of my pagination table, I am using an Ajax call in Struts 1.x to pull a JSONArray, whose information is used to build raw HTML data to replace the existing:
$('#resultsDisplay tbody').remove();
$('#resultsDisplay').append(tbodyHTML);
I've played around with some rows which can be built in place of missing data, but even when hidden those doesn't seem to work as expected.
A simple way to do this is to wrap the table in a container div and give that a min-height. You can't do this directly to the table because that causes it to stretch, which you probably don't want. Here's an example:
div {
min-height: 20em;
background: #ddd;
}
above
<div>
<table>
<tr>
<td>I'm</td>
<td>a</td>
</tr>
<tr>
<td>kewl</td>
<td>table</td>
</tr>
</table>
</div>
below
I have a table.
For example:
<table>
<tr>
<td>apple</td>
<td>big</td>
</tr>
<tr>
<td>pickle</td>
<td>small</td>
</tr>
</table>
after some fancy jQuery...
<table>
<tr>
<td>apple</td>
<td>big</td>
<td>10kg ------ Is this nice to do, any potential issues?</td>
</tr>
<tr>
<td>pickle</td>
<td>small</td>
</tr>
</table>
Just for fun: http://jsfiddle.net/Czcby/
You will end up with three cells on the first row and two on the second row.
This will not normally display, but if your styling has margins/border/padding on table cells, it can effect the display and layout of the table.
The short answer, for me, is yes you do.
The more detailed answer is: you don't strictly need to be consistent but it certainly helps if you want your table to look consistent across browsers. Not to mention the fact that being inconsistent now, even though it doesn't seem to cause problems currently, will have a bigger effect when you want to do more to your table, its styling, or the data inside it.
If you check out this JSFiddle in different browsers, you may see different behaviour:
Chrome and IE8: Render the table as having extra cells that jut out
from the two ordinary cells.
Firefox: effectively looks as though it has extra empty cells in a
third column.
Imagine the complications when it comes to styling for these different situations as your table grows.
Arguably, the colspan property is a way around this. I think colspan is pretty ugly; tables should be presented so that you can look at a column header and scroll down it to see the information relevant to that header. Having some other data reaching across into the column is a distraction. But that depends exactly on what you're trying to do.
Presentation and information design issues aside, there may be no way for someone looking at your code to know how many cells end up in each row. Better to have a consistent number in each row so you can check it quickly and easily should you need to anything else with the table or the data inside it. Useful for debugging.
Hope this helps.
There's no problem to do that, however, you may face some formatting issues as there will now be 3 td's on row one and 2 on row two.
use colspan="2" when a td use 2 columns.
I have a table like below. Imagine there are multiple columns, I thought by formatting the <col/> tag I would be able to change the formatting of every <td> in that column. I want to give data in the first column a text-align:center, but it doesn't seem to work. Is there a way to get this to work other than adding a class to every <td>?
<table>
<col class="column"/>
<tr>
...
</tr>
<tr>
...
</tr>
<tr>
...
</tr>
</table>
Give the table a class, e.g. <table class="table1">. Then, in your CSS, you can reference the cells like so:
.table1 tr>td:first-child { text-align:center; }
The class covers the tag it is tied to. Since you're closing the tag before doing anything, the class doesn't end up affecting anything.
Like the other guy said, put it in the table, which spans all the tds.
There's no way to get this to work in all common browsers, but you can use a modern CSS selector to achieve the effect in a standard (if not fully implemented) way.
tr:nth-child(1) { styles }
Where 1 is the first column.
More generally see http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
The common solution is to add a class on each "td" which is usually a non-issue as you're typically generating HTML from other code. I've never seen the col class to which you reference before so did a quick search, and it appears that a) it should be within a colgroup tag and b) it's limited in the styles you can set.
The non-css way is to simply add align="center" to your td of the respective column. This is one way where Dreamweaver saves development time: select the entire column, type in center for align and you're done.
I am attempting to create a page with tabular data, which must appear as multiple tables. I have two conflicting requirements to get around, however:
Each table must have a border around it.
Column widths for each table must be able to re-size based upon the content. However, the column widths must be consistent across all tables. (i.e. the size of a column is based upon the largest cell in that column across all tables).
To handle the second requirement, I have a single, top-level table which contains multiple thead and tbody sections. This accomplishes #2 beautifully. Essentially, I have created multiple pseudo-tables within a larger parent table, grouped as a single thead with an accompanying tbody:
<table>
<thead>
table1 header content...
</thead>
<tbody>
table1 body content...
</tbody>
<thead>
table2 header content...
</thead>
<tbody>
table2 body content...
</tbody>
</table>
Now, I am attempting to address the first requirement. Each pseudo table must have a border around it, passing itself off as a genuine table.
I have found, to my dismay, that IE 6/7 do not allow for adding border styles around thead/tbody tags, or I would simply have added a top/left/right border style to thead and a bottom/left/right border style to tbody.
Creating genuine tables and styling borders for those works to solve #1, but it breaks #2.
Another alternative would be to use first-child and last-child styles to create my borders. Unfortunately, this is neither pretty, nor does it work in IE 6/7.
Another alternative I have been looking into is creating a border around the entire table and attempting to create a row between the pseudo-tables which creates my separation, but while I can create top/bottom borders for it ok, I have yet to discover a means to erase the table's left/right border for just that row. Is that possible?
My last-ditch alternative is to create classes for drawing left, right, top, and bottom borders, setting the appropriate table cells to use these classes. I know this will ultimately work, but it is horribly clunky and makes for really messy markup. Colgroups cannot save me here, as they are incapable of handling border styles. That is unfortunate, as it would make this solution a little easier to stomach.
Is there a better method to accomplish the borders that I may have missed?
use <table rules="groups"> or similar values for rules
see http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1
Go with the method for creating the genuine tables, then try this.
I would just go with creating separate tables. Let's suppose each table looks like this:
<table>
<thead>
<tr>
<th class="column_1">Header 1</th>
<th class="column_2">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
...
</tbody>
</table>
Then, use jQuery to set the width:
var columnOneWidth = 0;
var columnTwoWidth = 0;
$(document).ready( function() {
$(".column_1").each( function() {
if( $(this).css("width") > columnOneWidth ) columnOneWidth = $(this).css("width");
});
$(".column_2").each( function() {
if( $(this).css("width") > columnTwoWidth ) columnTwoWidth = $(this).css("width");
});
$(".column_1").css({width: columnOneWidth + "px"});
$(".column_2").css({width: columnTwoWidth + "px"});
});
All you have to do is include the jQuery Javascript file (available from jquery.com) in your head tag:
<script type="text/javascript" src="scripts/my_jquery_file.js"></script>