If you have a <table> that is either very tall or very wide, and you wish to have it wrap to display on a screen. How can this be done with CSS?
Example: A table that is 300% page height and 30% page width would be broken into three parts.
#
#
#
#
#
#
to
# # #
# # #
I'm looking for a pure CSS solution, is this possible?
Edit: HTML Sample
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>6</td>
<td>1</td>
<td>5</td>
</tr>
<tr>
<td>42</td>
<td>5</td>
<td>34</td>
</tr>
[snip 100 lines]
<tr>
<td>4</td>
<td>0</td>
<td>3</td>
</tr>
</tbody>
</table>
You can use something similar to:
tr {
border: 1px dashed #f0f;
float: left
}
That will work in IE8+ and all modern browsers. It fails in IE7.
See: http://jsfiddle.net/XeLUV/
or with a width: http://jsfiddle.net/XeLUV/1/
This can't be done using a table. You'll need to split the table into three separate tables and re-format the page from there.
CSS does provide a columns feature, which allows the content in block elements to be displayed in columns (ie like newspaper columns), but this won't work with table content, and in any case it also has limited browser support (not supported in IE9; vendor prefixes elsewhere), so probably not recommended for mainstream use yet.
But if you do want to find out more about it, Quirksmode has a good write up on how to use this feature: http://www.quirksmode.org/css/multicolumn.html
And you can see the current browser support situation at CanIUse: http://caniuse.com/#search=columns
Related
I'm trying to program a javascript timeline, in which you click on the left column revealing something in the right column. I suppose there are easier ways to do this, but the HTML below looks really really neat.
So the usual way rowspan works is that you have a td that you want to extend down a few rows to complete the table.
<tr>
<td>1942</td>
<td rowspan=2>Something happened</td>
</tr>
<tr>
<td>2017</td>
</tr>
However, what if I want to rowspan upwards, so that the below timeline item fills both rows?
<tr>
<td>1942</td>
</tr>
<tr>
<td>2017</td>
<td rowspan=2>Something else happened</td>
</tr>
I know I can just move them all to the top row and rowspan from there, but I really want to have this nice, easy-to-edit format, with dates and rows right next to each other.
(An idea I had was that if you think of rowspan as analogous to css width and height, there might be something analogous to css left and top (like "table-row"?) you could set, other than actually moving the td's to the tr you want. I don't think that exists, though.)
(also, does anyone know if negative rowspan is defined?)
No, rowspan always works “downwards”. HTML 4 does not explicitly say this, but it is definitely implied, and there is no way to change it. HTML5 makes it explicit, in its boringly detailed (but necessary for implementors) Processing model for tables.
I know this is an old question, but I was looking for this myself and this is the first result on google. After a bit of tweaking, I’ve managed to find a solution:
<table>
<thead>
<tr>
<td>Column 1/<td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=2>A1</td>
<!--This cell must be hidden; otherwise you will see a gap at the top of the second column between the header and body-->
<td style=“padding:0px;” />
</tr>
<tr>
<td rowspan=3>A</td>
</tr>
<tr>
<td>A2</td>
</tr>
<tr>
<td>A3</td>
</tr>
</tbody>
</table>
You might have to experiment a bit if you want to have a hierarchy deeper than 2 columns, but I’m confident it’s possible.
I have a table in which I need to add another cell per column, and since that column will have a lot of elements on it, the cell content must flow below the other cells in the same row, filling all the available width on the table. This way the columns won't be stretched making it impossible to view its content.
A visual example might help: http://www.asciiflow.com/#Draw9009157520507047228
Edit
After reading all the replies I realize that perhaps I didn't provide enough information. My apologies.
The table I want to modify is the one in http://staging.locamotion.org/projects/pootle/ . Note that this table uses the sorttable JavaScript library for sorting the table.
I have to modify that table to display tagging information for each of the entries. Since every entry can have several tags which can span a lot of space, the new column (necessary to keep working the sorting library) must flow below the other columns to allow showing the tagging stuff which can span to one or more lines due to width constraints (have in mind that this program is used on third world countries will old equipment and low resolution screens).
Someone asked what I've tried. I tried adding an additional row per each entry, which only one cell with colspan attribute, but that way the sorting library doesn't work:
<table class="sortable">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="even">
<td colspan="4">First entry tagging stuff</td>
</tr>
<tr class="odd">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="odd">
<td colspan="4">Second entry tagging stuff</td>
</tr>
<!-- More and more entries -->
</tbody>
</table>
If you have any other idea on how this UI can be achieved while keeping column ordering I would appreciate it.
I want to apologize again, and also thank the people who spent some of their time trying to answer and help me the best they could.
Tables cells are ALWAYS rectangles and cannot "flow" as described in your image.
You would need to nest a table in a DIV and use CSS floats to accomplish what you're looking for.
I don't think that's possible in HTML.
You could create a Div with a left-floated table in it that contains the two cells, and then have the third cell's content as the content of the div (after the table).
<div>
<table><tr><td>First</td><td>Second</td></tr></table>
Third with a lot of content that might actually span under the table but it's not part of the table
</div>
Like so: http://jsfiddle.net/9QS44/
You can merge the cells from 2 rows using rowspan and similarly for the columns using colspan. You can also combine both the rowspan and colspan. Not sure if you will be able to achieve the effect you're trying to get, but this is the only way I know that will get you close. This should also help you out. http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
I agree with previous posters that HTML table cells do not exactly work the way you are wanting. Here's another way to skin the cat:
<style type="text/css" media="screen">
table {
border-collapse:collapse;
border:1px solid #FF0000;
}
table td{
border:1px solid #FF0000;
}
table#child {
width:200px; float:left;
}
table#parent {
width:300px;
}
</style>
<table id="parent">
<tr>
<td>
<table id="child">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>Text that<br />wraps<br /> and wraps.
</td>
</tr>
</table>
Might want to reduce the amount of bottom margin on the child table as well so that the text wraps a little bit closer.
If it were me, I'd explore using divs for this particular need and forget about tables altogether.
I have 2 tables one on top of the other and I would like to align their column widths exactly with each other, is there a way to do this? Tried fixed table col widths etc no joy
You can see on fiddle the columns are slightly off each other
http://jsfiddle.net/askhe/
HTML
<table class="tblresults txtblack">
<tr class="tblresultshdr bold">
<td class="col1">Company</td>
<td>Currency</td>
<td>Bid</td>
<td>Ask</td>
<td>YTD Vol</td>
</tr>
<tr>
<td class="col1">ABC</td>
<td>GBP</td>
<td>94</td>
<td>16</td>
<td>3,567,900</td>
</tr>
<tr>
<td class="col1">DEF</td>
<td>GBP</td>
<td>3</td>
<td>46</td>
<td>10,000</td>
</tr>
<tr>
<td class="col1">GHI</td>
<td>GBP</td>
<td>3</td>
<td>46</td>
<td>10,000</td>
</tr>
<tr>
<td class="col1">JKLM</td>
<td>GBP </td>
<td>7</td>
<td>46</td>
<td>56,000</td>
</tr>
</table>
<table class="tblresults txtblack margintop10">
<tr>
<td colspan="5" class="bold" >Investments</td>
</tr>
<tr>
<td class="col1">ghjk</td>
<td>GBP</td>
<td>13</td>
<td>6</td>
<td>130,000</td>
</tr>
<tr>
<td class="col1">asdsa</td>
<td>GBP</td>
<td>120</td>
<td>46</td>
<td>16,000</td>
</tr>
<tr>
<td class="col1">dfdsfsdf </td>
<td>GBP</td>
<td>1</td>
<td>4</td>
<td>13,000</td>
</tr>
</table>
CSS
table.tblresults {
width:100%;
*width:99.5%;
border: 1px solid #b9b8b8;
top: 0;
}
table.tblresults tr.tblresultshdr {background: lightgrey;}
table.tblresults tr.tblresultshdr td {padding: 6px;}
table.tblresults td {padding: 8px; border: 1px solid #b9b8b8;}
table.tblresults td.col1 {width: 70%;}
table elements where meant for scientific data, such as probes from experiments, not for actual layout:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
While you're not using them for layout, your problem is actually a rendering/layout issue. The easiest solution to this is to merge both tables into one (jsfiddle).
If you prefer your data to be encapsulated in many little tables instead of one giant table you'll need to specify a width for almost all columns.
Why not put them in the same table? It seems they are semantically similar.
http://jsfiddle.net/askhe/5/
No need to merge tables, you can use this
table-layout: fixed;
There is a wonderful article here about it
https://css-tricks.com/fixing-tables-long-strings/
Although I agree that the solution to merge the tables is the best and simplest one in many cases, i came to the need to really have this 2 separate tables with identical columns (to make one table fixed and the 2nd scrollable)
to achieve that, I declared 2 tables with same number of columns, one with width rules (% and px), one without
Then, with Javascript, I applied the width of the ruled table to the free one:
document.getElementById("HeaderTable").style.width = document.getElementById("main").clientWidth ;
document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth ;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth ;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth ;
1st line fix the table width, then it's done column by column. Using .clientWidth is important, because .style.width send a percentage if it's what is applied on the ruled column.
This was almost working, but not quite. Table had a similar layout, but shifted by a few pixels. As I only needed that to be working in IE, I though I could move that with fixed values, to be as close as possible as what I wanted, so I change my code to:
document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth - 9;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth - 10;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth - 10;
I guess the values could be different for a different table. But what surprised me, is that it works in every major browser, independently of the zoom level
windows resize breaks the alignement, so you need to bind the function to this event. Also, this solution don't work anymore on extreme size of the table
Here is a jsfiddle, as some CSS is involved. for the moment it doesn't work on zoom, because my floating header doesn't stick to right: 0px, don't know why yet
Well, using this simple HTML snippet you can do it. well in my case i was creating pdf's from HTML, so this solution worked for me. Hope it help some one else.
<table border=0>
<tr>
<td>
<!--Insert table 1 -->
</td>
<td>
<!--Insert table 2 -->
</td>
</tr>
</table>
having trouble deciding whether or not it makes sense to put paging information about a stats table in a <tfoot> element of the table.
information like "Page 1 of 13" and links to "next" & "prev," etc.
w3c <table> reference & examples don't do <tfoot> justice, IMO.
so, doing something like:
<table>
<caption>Stats Table!</caption>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
prev pg next pg
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</tbody>
with some minor styling looks like this (click for example on jsfiddle)
does this seem to fit into proper semantics of html tables? any references as to why or why not?
I would say yes, that would be acceptable.
Traditionally, the <tfoot> is usually used to duplicate header information when a table must be broken across boundaries (think printed pages and things of that nature). It also can be used as a static footer when the <tbody> elements are rendered in a scrolling panel. I believe that is close enough to what you're trying to do.
As a side note, I'm glad to see you've placed the <tfoot> before the <tbody>. I can't begin to count how many times I see people put it at the bottom.
In general I agree with the accepted answer, but there's one exception: If you are on a small screen device and use overflow-x: auto for horizontal scrolling of the table, then you may (or may not) want your prev/next actions to stay visible - independent of the horizontal scroll position of the table.
I've been building a form all day and doing most of my dev in webkit browsers because of the good developer tools. I went to test in IE and I'm having some really strange results with regards to having 3 columns of divs in a row. I can't seem to find a fix. Has anybody seen this issue before (see link below)?
http://65.61.167.68/form/
I suggest avoiding the use of display: inline-block, since IE 6 and 7 don't implement it properly. In this case, you can solve the issue in FF by changing line 33 of your stylesheet. Remove the display: inline-block and instead, float left.
#paydayForm .row .column
{
float:left;
margin-bottom:5px;
margin-right:18px;
margin-top:5px;
width:170px;
}
No answer to your problem, but for this kind of data it's a lot better to use tables instead of divs. Divs can be useful, but not in this case. Check the following example: http://jsfiddle.net/NtXwQ/
<table>
<tr>
<td colspan="2">amount requested</td>
<td rowspan="2">info<br />text<br />here</td>
</tr>
<tr>
<td>first name</td>
<td>last name</td>
</tr>
<tr>
<td>zip code</td>
<td>city</td>
<td>state</td>
</tr>
<tr>
<td colspan="2">date of birth</td>
<td>social security no</td>
</tr>
</table>
Using CSS you can change the width, height, padding, etc. and create the same style you're using now. In the end a setup like this is also a lot easier to maintain. Using divs to display tabular data will only give you headaches :)