Tables with Row across Page |
Tables with Row across Page |
MatJ |
Nov 21 2015, 10:23 PM
Post
#1
|
Group: Members Posts: 2 Joined: 21-November 15 Member No.: 23,763 |
Hi Everyone,
This is a general question that I am hoping to apply to several pages in my website. I have some data make sense to display in a tabular layout but the total width of the 4 columns is about 360px. Ideally, I would like to be able to display the rows across the page then down similar to the effect of using "display: inline-block". The problem I have is being able to get a the columns to display above each row across the page dynamically so if the screen is resize it will increase or decreased the headers similar to the number of rows. Below is an example. When you resize the screen the rows wrap across and then down the page. There is only one header. How can I get it to duplicate across the page for the number of "row columns" ? <!DOCTYPE html> <html> <head> <title>Tables with Row across Page</title> <style type="text/css"> #page #header, #page #body { display: block; } #page #header span, #page #body a { margin: 0px; padding: 0px; display: inline-block; text-decoration: none; text-align: center; width: 350px; } #page #header span div, #page #body a div { margin: 0px; padding: 0px; display: inline-block; text-align: center; } #page #header span div:nth-child(1), #page #body a div:nth-child(1) { width: 100px; } #page #header span div:nth-child(2), #page #body a div:nth-child(2) { width: 40px; } #page #header span div:nth-child(3), #page #body a div:nth-child(3) { width: 100px; } #page #header span div:nth-child(4), #page #body a div:nth-child(4) { width: 40px; } #page #header span div:nth-child(5), #page #body a div:nth-child(5) { width: 40px; } </style> </head> <body> <div id="page"> <div id="header"> <span> <div>Date</div> <div>No</div> <div>Type</div> <div>Start</div> <div>End</div> </span> </div> <div id="body"> <a href="#"> <div>1 Oct 2010</div> <div>5</div> <div>General</div> <div>5</div> <div>10</div> </a> <a href="#"> <div>2 Oct 2010</div> <div>6</div> <div>Special</div> <div>11</div> <div>21</div> </a> <a href="#"> <div>3 Oct 2010</div> <div>7</div> <div>General</div> <div>22</div> <div>35</div> </a> <a href="#"> <div>3 Oct 2010</div> <div>8</div> <div>Type</div> <div>36</div> <div>45</div> </a> </div> </div> </body> </html> Thanks for any assistance. Cheers, MatJ |
pandy |
Nov 22 2015, 01:00 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Why don't you use a real table? It's tabular data and if i understand what you are after a 100% wide table would behave as you want. Or do I misunderstand and you actually want the cells to wrap?
|
MatJ |
Nov 23 2015, 10:20 AM
Post
#3
|
Group: Members Posts: 2 Joined: 21-November 15 Member No.: 23,763 |
Why don't you use a real table? It's tabular data and if i understand what you are after a 100% wide table would behave as you want. Or do I misunderstand and you actually want the cells to wrap? Thanks for your feed back. Yes. I want the rows to wrap because the "table row width" is only 350px wide and this would waste a lot of screen real estate. |
Christian J |
Nov 23 2015, 01:33 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
First, the HTML structure is invalid, you can't place a DIV element inside SPAN (but you can place DIVs inside links in HTML5). Also DIV and SPAN are semantically meaningless elements, to be used only as a last resort when nothing else fits better.
The problem I have is being able to get a the columns to display above each row across the page dynamically so if the screen is resize it will increase or decreased the headers similar to the number of rows. Below is an example. When you resize the screen the rows wrap across and then down the page. There is only one header. How can I get it to duplicate across the page for the number of "row columns" ? Do you mean you want extra sets of headers to appear when there are two or more columns? If so, one idea might be to hard-code such headers, and then hide them in narrow windows with for example CSS media queries. Perhaps you could make a table with header cells in the odd rows, and data cells in the even. Then you might use CSS3 media queries to hide the header rows in narrow windows. Another idea might be to clone an original header with javascript, and insert the copies on top of each new column. This sounds like an interesting challenge, but it may take some time to consider. |
Christian J |
Nov 23 2015, 09:08 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
Here's the first attempt:
CODE <style type="text/css" media="screen"> .table {display: inline-table;} th, td { border: solid; width: 5em; } tr.show {display: table-row;} tr.hide {display: none;} </style> <script type="text/javascript"> function initialize() { function toggle_headers() { var table=document.getElementsByClassName('table'); for(var i=1; i<table.length; i++) { if(table[i].getBoundingClientRect().left>table[0].getBoundingClientRect().left) { table[i].rows[0].className='show'; } else { table[i].rows[0].className='hide'; } } } toggle_headers(); window.addEventListener('resize', toggle_headers, false); } if( window.addEventListener && document.getElementsByClassName && document.documentElement.getBoundingClientRect ) { window.addEventListener('load', initialize, false); } </script> <table class="table"> <tr> <th>Date</th> <th>No</th> <th>Type</th> </tr> <tr> <td>Jan 1</td> <td>5</td> <td>Special</td> </tr> </table> <table class="table"> <tr> <th>Date</th> <th>No</th> <th>Type</th> </tr> <tr> <td>Jan 2</td> <td>6</td> <td>General</td> </tr> </table> <table class="table"> <tr> <th>Date</th> <th>No</th> <th>Type</th> </tr> <tr> <td>Jan 3</td> <td>7</td> <td>Unknown</td> </tr> </table> I'm not convinced that tables is the best semantic choice. Maybe definition lists are more suitable? |
Lo-Fi Version | Time is now: 29th March 2024 - 01:35 AM |