I've found many ways to create a 'tableless' table layout using only DIVs, but very little about the opposite.
I have more than a few html pages with a table structure, and they all refer to a common CSS file. The tables have a simple 2-column layout as follows:
<table>
<tbody>
<tr>
<th>category</th>
<td>description</td>
</tr>
<tr>
<th>category</th>
<td>description</td>
</tr>
</tbody>
</table>
I want to be able to transform the layout of the table through CSS only, in order to make it look like a 'single-column table' if you will, with both categories and descriptions stacked on top of another within the full-width of the table. I've tried display:block and width:100% but it doesn't work cross-browser.
Thoughts?
You can achieve the result you want if you float each cell.
See this demo: http://jsfiddle.net/t3ZaM/
Works in FF, Chrome, Opera, Safari, IE9 and 10 but I can't check for older versions of IE because I don't have them.
Related
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.
I am trying to create a master detail table where one of the rows will contain the detail of a child object. For example we could have a customer and when you click on a row, it expands out to show the customer's orders. The html might look something this:
<table id="report">
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
<tr>
<td colspan="4">
<!-- Details here -->
</td>
</tr>
</table>
What would be the best html/css for cross browser compatibility? I need to support IE6. I want to avoid putting an inner table inside. If I use an unordered list, could I use css to get nice grid effect?
You can use ULs or DIVs to get a grid effect by placing each row in an LI tag, and filling that LI with floated block elements like DIVs that are the same width as your table columns.
<ul>
<li>
<div style="float: left; width: 100px">item1</div>
<div style="float; width: 120px;">item2</div>
...
</li>
...
But you would have to measure your floated DIVs exactly to the pixel, or they may wrap around and break the whole layout. Also if the container div ever gets resized it may break. You could apply a clear="both" to each LI to minimize breakage.
Be aware that if you use any margins on your floated divs that they will suffer from the double margin bug in ie6.
But this is not what UL is for. If you are trying to follow modern trends that shun using tables for anything, you should consider that this is exactly the type of tabular data that tables are supposed to display: Rows and columns of data. It would be semantically correct to use a table and I can't think of any advantage of not using one.
Not to mention that if ie6 compatibility is (unfortunately, shamefully) a big part of the specs of your project, then forget about being super modern and just use traditional working tables.
Ideally I would stop using colspan="4" and have your dynamic code assume that it will be nested inside a 4 column table, and just loop through table rows. As Jeremy B said in his comment, you already have a table anyway.
What I am doing seems to work on firefox and IE but not safari.
I have something like this
<table>
<thead>
<tr>
<th style="display: none;">hi</th>
</tr>
</thead>
<tr class="someClass">
<td style="display: none;"><span>hi</span></td>
</tr>
Now imagine I have many columns and rows and many headers. Now in all browsers this coulmn would be hidden. In safari it makes some gap and then all the other columns are out of alignment.
http://gyazo.com/ef5ce5e994abb954aab7069b14699476.png
this is how my column headers look like. Am I missing something?
Setting display:none on an element takes it out of the document flow, but that doesn't always work well with table cells as they are not independent of the surrounding elements.
You would have to actually remove the elements from the table rather than hiding them to make the table realign itself with the remaining elements.
I think I figured it out. I just put that column last(and the header last as well). Now it seems to look proper.
Is there any particular reason why chrome does not respect "display:inline" when it's used on "<table>" and is there a known workaround? Everything works fine in firefox but for some reason chrome refuses to do the right thing when I type
<table style="display:inline;">
table stuff
</table>
firefox alignment: firefox alignment http://dkarapet.userworld.com/cart_noDB/firefox_alignment.png
chrome alignment: chrome alignment http://dkarapet.userworld.com/cart_noDB/chrome_alignment.png
Both versions use the same html source that sets the display property to inline. The tables individually are not wrapped inside any other div and they are all enclosed inside one big div. Here's the pastie for the relevant part of the html.
Try inline-block.
css 2.1 defines inline-table. No idea how widely supported it is, but it sounds like that might be what you're looking for.
http://www.w3.org/TR/CSS21/tables.html#table-display
Although from your screenshot, it looks like what you really want is control over vertical alignment.
Why on earth would you set a table element to be inline? It should be a display of table. User error IMO.
You'd have to alter the display mode of all the tr and td elements inside otherwise they will improperly render, most likely.
If you need the table to be in the same line as another element, wrap a div around the table and float it. Don't mess with the table.
EDIT: As I specified per my last comment, you should mess with vertical-align and probably set it to top on the tables.
To pull of what you're after, you just need to add this to every td:
<td valign="top">
That will force everything to the top of each cell and will force things to display inline, how you want them to. No CSS needed here.
It SHOULD be coded like this:
<table>
<tr>
<td valign="top">item 1 info</td>
<td valign="top">item 2 info</td>
<td valign="top">item 3 info</td>
</tr>
<tr>
<td valign="top">item 4 info</td>
<td valign="top">item 5 info</td>
<td valign="top">item 6 info</td>
</tr>
</table>
edit: Or if (for some reason) you're not using TR and TD's you can try this:
<table style="vertical-align:top;">
table stuff
</table>
I would like to ask what is the better way of specifying HTML column width? the width attribute or the style attribute? Assuming I am using IE 6. Does IE render the width attribute better than style?
By width attribute
<table width="900">
<tr>
<td width="450">A</td>
<td colspan="2" width="450">B&C</td>
</tr>
....
</table>
OR by style attribute
<table style="width:900px;">
<tr>
<td style="width: 450px;">A</td>
<td colspan="2" style="width: 450px;">B&C</td>
</tr>
....
</table>
Firstly before I answer your question, something you should know is how tables are rendered, experiment with the table-layout fixed style for the table element:
If the browser knows the width of the first table row columns upfront (if you provide the table layout fixed style on the table) the browser can begin rendering the top of the table even before its calculated the width of any resulting rows. What this means? Tables populated by Ajax calls with a fixed layout can begin displaying results to a user before the full ajax call is finished. Best way to think of this is like a progressive jpg. In the end your pages will appear to load faster.
table
{
table-layout:fixed;
}
Now to answer your question.
Actually neither example you provided is correct. you typically do not set width on a cell that is spanned across 2 or more cells. In any table its a good idea to create at least 1 row with all the cells, this can either be in the TH or (just the way I like to do it in a blank tr.
For example...
<table>
<tr>
<td width="450"></td>
<td width="225"></td>
<td width="225"></td>
</tr>
<tr>
<td>content here</td>
<td colspan="2">content here</td>
</tr>
</table>
What ever way you decide to use style or just standard html width, the choice is yours, but in the end you should have your first row (if table layout is fixed) or any row (if table layout is not fixed) to contain the width definition for each invidivual cell. This will also help you with planning the correct looking table, hope this helps.
Test the table layout fixed, by creating a huge like 10 000 row table, and test the rendering speed vs a non fixed table layout.
The whole debate about HTML 4 vs XHTML , style vs attributes I think is really a question of maintainability. I don't think there is anything wrong setting the width using Style or plain width with HTML 4 transitional, they both do the same thing. The reason why you can do both is because HTML has evolved a bit, yes it can get messy! Good luck
Just add <div> tag inside <td> or <th> define width inside <div>. This will help you. Nothing else works.
eg.
<td><div style="width: 50px" >...............</div></td>