Consider this simple table layout:
<table>
<tbody>
<tr>
<td>Cell1
<td>Cell2
...
<tr>
...
<tbody>
<table>
Consider also that this goes on for 100.000 of lines; a large table.
If I want to style the cells and I have a choice to add a class to each td, or to add a class to the table (or tbody).
version 1
td.some-style {
some definition
}
and add a clase to each and every td
or version 2
table.some-style td {
some definition
}
and merely add a class to the table.
I've come to understand that browser read css right to left. And in version 1 would go an find all td dismissing quite fast the ones that don't have the class, Sounds fast to me. In the second version the browser would also first find all td for each go up a couple of levels and find, or not, the class. The first version however will explode the size of the html code as the class name needs to be copied in each td, in the second case it is only a view bytes. Remember the amount of td is quite larger
What would be best? Can I benchmark this in some way? Oh and rest assured the html is generated, not typed.
Related
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 which is OK in web pages, but when printing my table (ctrl+p) it breaks not the way I want. The last row of the first page splits with the part of the row on the first page and the other part of the row on the second page. So, is there any way to overcome the problem, the rows can have different content and size. I also tried this properties
page-break-before/after: auto. page-break-inside:avoid;
but with no result. Is there any way to break the table and move the part of the table to the next page without splitting the last row into two parts for print media? Any help will be appreciated.
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<th><span>Firstname</span></th>
<th><span>Lastname</span></th>
<th><span>Points</span></th>
</tr>
<tr>
<td><span>Jill</span></td>
<td><span>Smith</span></td>
<td><span>50</span></td>
</tr>
<tr>
<td><span>Eve</span></td>
<td><span>Jackson</span></td>
<td><span>94</span></td>
</tr>
<tr>
<td><span>John</span></td>
<td><span>Doe</span></td>
<td><span>80</span></td>
</tr>
/*here I have many <tr> elements*/
</table>
</body>
</html>
If I understand correctly, you want your table to break only between rows and not within them. You can accomplish this in Firefox and Internet Explorer with the following css rule:
tr {page-break-inside: avoid;}
Unfortunately, that doesn't work in other popular browsers, such as Chrome.
As has been suggested, you can prevent page breaks within the content of an individual cell by wrapping it in a div that has "page-break-inside: avoid;" set on it, but if the content height varies within the row, you'll still end up with parts of the row on two different pages.
If you really want to solve this problem and are willing to throw some javascript at it, I have posted a solution here that should do the trick.
You can request a page break, which will be invisible on the screen, but will force the element to a new page when you print. But the rules are more subtle than you might expect.
The CSS property page-break-before:always can only by applied to a block element. Not an inline, or anything odd like a table-row or a list-item. So do not style the row or cell, nor even a <tbody> or a <br/>. And it cannot be an element that the browser is allowed to omit, so you cannot just throw in an empty <div> with the style on it. One has to add a <div> or <p> around the first cell contents, for instance, to give the style.
Likewise page-break-after:always can be applied to something similar at the end of the previous row. I find this totally annoying, as what I always want to protect is a row, or a grouping.
Some browsers may also want you to change the style of your table to page-break-inside:auto, as the default style for a table is often already page-break-before:avoid.
Since it is the default style, adding it does not help. The browser is already avoiding breaking your table as much as it is willing to. But failing to remove it easily makes the other options useless, especially in Chrome.
I'm having a stupid issue using a table, I hardly ever use tables and I'm not sure why the first image has a huge space after it. I tried setting a width, using "-margin" & Padding. I cant find anything to reduce the size.
<tr class="tblpadding">
<td>Character:</td>
<td class="tdchar"><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
</tr>
Best to see the fiddle to show the issue - http://jsfiddle.net/uh6j4/1/
Because the column cell has larger width because of the input type text boxes, just add colspan to that cell
Demo
Also, I just saw that you've inconsistent table cells in your
example, so make sure you fix them according to your requirement.
But as far as the explanation goes, you need to use colspan on the column which will contain those images.
Also I would like to point this out, it's invalid to use form element nested as a tr direct child, you should use that inside a td, always validate your markup here before you put your websites live... but as far as the idea goes, the signup form you are trying to build can be designed without tables..
actually, you should not be using table for creating a layout in the first place.
use div's instead.
to give the organized look that you have here, what you need to do is very simple use min-width on the labels for uniformity.
I've created the same look that your table have , using div's only.
if its the same, why bother? because my layout have a flexibility that yours dont have.
take a look here: http://jsfiddle.net/avrahamcool/uh6j4/7/
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 have seen many HTML table related questions in SO. Many questions about browser specific bugs like CSS and JavaScript by involving HTML table is usually asked. An earlier version of DataTable YUI markup looks like as follows:
// dynamically generated
<table>
<tr>
<td>Some content</td>
<td>Other content</td>
</tr>
</table>
Current version now looks like
// dynamically generated
<table>
<tr>
<td><div>Some content</div></td>
<td><div>Other content</div></td>
</tr>
</table>
Notice a div inserted inside a column.
<div> advantages includes
stable behavior and event support across browser
JavaScript framework support
display block by default
easy to create and insert inside a HTML page
You can think a HTML table element as follows
<div class="collection">
<div class="row">
<div>Some content</div>
<div>Other content</div>
</div>
</div>
I need it because I have designed a custom "like a table" component by using div. My custom "like a table" component purpose is to show tabular data. Stable behavior and event support (single and double-click in a row and a column) across many browsers is one feature that i have considered. Notice, for instance, ExtJS uses a custom "like a select" component by using div, and you know many bugs related to HTML select.
So what you think about design a HTML table by using div?
I think it really depends on why you need the divs instead of a table.
If you just want to show tabular data, such as an excel spreadsheet, then you can make it interactive and still use a table.
But, if you are doing something where the appearance may change, or the table may be around another object, then be creative and do your html table.
It sounds like you are not boxed in by how things have been done, but are willing to go outside that box and write a solution that solves your problem best.
But, once you go this route you will want to do extensive testing on whatever browsers you support to ensure that the table appears as you expect, as tables are table, we know what to expect, css and javascript just need more testing.
Divs are always considered if semantics is taken into account.
Tables are easy to design and can be managed quickly without much CSS.
If all you're doing is re-creating it, I think it's quite ridiculous. Though there are legitimate uses for it. Tables have uses, divs have uses, boring arguments about it are just a waste of time.
-- Edit:
See also Why not use tables for layout in HTML?