-
I can only assume you mean further tr and td elements, although you'll be changing the semantic meaning of the data relationships if you duplicate content that way. Either way, if you show us your code for what you come up with, we can offer further suggestions. In the meantime it might still be a good idea to consider if a table is the right at all in this situation? Or you could try something with flexbox? Please refer to these articles on responsive tables for further help https://css-tricks.com/accessible-si...onsive-tables/ and https://css-tricks.com/responsive-data-tables/
-
1 Attachment(s)
Hi beverleyh
yes i meant further tr td elements
see screenshot attached also
here is code
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
@media screen and (max-width:320px)
{
}
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td>john smith david</td>
<td>age 30 years</td>
<td>bombay</td>
<td>active</td>
</tr>
<tr>
<td>samson</td>
<td>age 42 years</td>
<td>italy</td>
<td>active</td>
</tr>
<tr>
<td>george</td>
<td>age 35 years</td>
<td>spain</td>
<td>active</td>
</tr>
</table>
</body>
</html>
Attachment 6146
-
Well, I'm not seeing your attempt to create your mobile layout using the suggestions already given to you. To recap - your options to try so far are;
- show or hide content using the display property
- incorporate the use of pseudo elements
- flexbox to play with layout
- use something other than tables
You should also remove those deprecated table attributes that I've already mentioned, and use CSS instead.
As it currently stands, it looks like you've posted in this and multiple other forums (CSS Tricks, webdeveloper.com) to ask other people to do your work for you for free, which unfortunately is unrealistic in volunteer-driven online help communities. You *may* receive the code you want for free, if the subject personally interests another develop for example, but it is unlikely. You can wait it out though if you wish? Personally, I'd give it a whirl at your side and see what you come up with. Potential helpers are more likely to respond if you show that you're actually trying out the suggestions you receive .
We do however offer a paid help forum at DD, so if nobody offers to do the work on your behalf, and you can't really face doing it yourself, you could post your request there and negotiate a fee with developers who wish to take you up on your offer of paid work. http://www.dynamicdrive.com/forums/f...-Work-Requests
Good luck with your project
-
I agree with Beverleyh that using divs together with specific CSS is much better than using tables for your project.
That said, I think the only way to obtain what you want with the help of tables is to use multiple tables and a little bit of javascript to dynamiclly set the captions:
Code:
<head>
<style>
table {border-right: 1px solid black; }
td {border:1px solid black; width:25%; height: 100px; vertical-align: top; padding: 10px; border-right:0; }
caption {text-align: left; border: 1px solid black; border-bottom:0; padding: 10px; }
@media screen and (min-width: 321px) {caption {display: none}}
@media screen and (max-width: 321px) {.pseudo_caption {display: none}}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="100%" id="first_table">
<tr>
<td class="pseudo_caption">John Smith David</td>
<td >Age 30 years</td>
<td>Bombay</td>
<td>Active</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" width="100%" id="second_table">
<tr>
<td class="pseudo_caption" >Samson</td>
<td>Age 42 years</td>
<td>Italy</td>
<td>Active</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" width="100%" id="third_table">
<tr>
<td class="pseudo_caption" >George</td>
<td>Age 35 years</td>
<td>Spain</td>
<td>Active</td>
</tr>
</table>
<script>
function caption(id)
{
document.getElementById(id).createCaption().innerHTML=document.getElementById(id).rows[0].cells[0].innerHTML;
}
caption('first_table');
caption('second_table');
caption('third_table');
</script>
</body>
