The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tables with Row across Page
MatJ
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MatJ
post Nov 23 2015, 10:20 AM
Post #3





Group: Members
Posts: 2
Joined: 21-November 15
Member No.: 23,763



QUOTE(pandy @ Nov 22 2015, 02:00 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.

QUOTE(MatJ @ Nov 22 2015, 04:23 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 01:35 AM