SOLVED - Table that looks good on mobile & PC

[qq]

I am having a lot of trouble making a table template that is readable on mobile and PC.

I can make one or the other, but getting both to work simultaneously seems beyond my skill. The easy tables from this plugin don't dynamically scale on mobile, and are unreadable. I've tried floating elements within the html style, which breaks the PC table since I can't figure out how to control the order of elements. 

Help would be very appreciated!



What I want (doesn't need to be exactly this, just something that is readable/not too terrible looking):
PC:


Mobile:




What I've got:

Attempts Thread Link


[div align="center"][div style="background-color:#af8a5e;width:95%;border-left:5px solid #801b24;border-bottom:solid 5px #5d1120;"][table][tbody][tr][td style="width:400px;"][div style="background-color:#5d1120;width:200px;height:40px;float:right;margin:10px;margin-top:10px;"][div style="text-align:center;font-family:"text-transform:uppercase;text-align:center;color:rgb(234, 234, 234);padding:3px;"][b][font size="6" color="#f8e2c7"]RP Title Yea[/font][/b][/div][/div][div style="background-color:#f8e2c7;width:180px;height:40px;float:right;margin-right:20px;"]RP Summary cool this is neat[/div][div style="width:150px;height:150px;background-image:url(https://i.imgur.com/ndEfNvS.png);border-radius:100px;margin:10px;border-right:5px solid #801b24;border-bottom:3px solid #5d1120;"][/div][/td][/tr][/tbody][/table][div style="font-size:11px;color:#1f1f1f;text-align:justify;padding:10px;"]
[/div][div style="width:110px;margin:10px;background-color:#d9788d;margin-bottom:5px;"][div style="font-size:12px;font-family:times new roman;color:#1f1f1f;padding:5px;"]Notes[/div][/div][div style="float:left;width:110px;margin:10px;background-color:#78d9c4;margin-top:-31px;"][div style="font-size:12px;font-family:times new roman;color:#1f1f1f;padding:5px;"][#]Rp [#]FrancisRP [#]TestRP [#]MoreRP [#]LotsofTags[/div][/div][div style="float:right;width:110px;margin:10px;background-color:#78d9c4;margin-top:-31px;"][div style="font-size:12px;font-family:times new roman;color:#1f1f1f;padding:5px;"]Whatevs[/div][/div]
[/div][div style="font-size:12px;font-family:calibri light;text-align:center;opacity:0.6;"][a href="http://templatehq.proboards.com/user/206"]OWL[/a][/div]


PC:

Mobile:

[elli]

This is a long-standing issue in HTML/CSS. Tables existed before responsive design was ever a consideration, so they can't reflow without essentially breaking down the structure using CSS (creates accessibility issues). The simple answer is that it's easier to use divs and flexbox for layouts like this, and the more complex answer is how to implement it. It would require a rewrite of your layout templates, which affects how some plugins will interact with your forum because many plugin authors select by HTML tag (bad). It's a trade-off: do you want plugin support, or a responsive theme?

css-tricks.com/accessible-simple-responsive-tables/

This article talks more about responsive "tables", and has examples for each solution.

[qq]

Thank you so much for the answer!

I think plugins are definitely top priority, because I love them and they are wonderful...

Do you know how far I can get towards this without breaking my plugins?

[Kami]

Sept 30, 2018 16:29:29 GMT -8 qq said:

Thank you so much for the answer!

I think plugins are definitely top priority, because I love them and they are wonderful...

Do you know how far I can get towards this without breaking my plugins?

Pretty far, actually. PB accepts divs and some in-line styling in posts, though in UBBC format with square brackets. If you use divs as outlined in elli's article above, and using %'s in inline styling instead of fixed pixel widths, replacing out any <> for [], you should be able to get pretty close to what you want.

[qq]

Thank you for the help! I managed... this? It's not the worst, and it's pretty legible? If there's something about it that is weird, I'd appreciate any advice!

RP Title

RP Summary, location, characters, whatever! You can use hyperlinks and stuff too!

• Previous:                 •Next: [#]Testing [#]Organization [#]HelpPlz


[table style="border:1px solid black;width:100%;text-align:center;"][tbody][tr][td style="height:30px;width:100%;border-width:1px;border-style:solid;border-color:black;background-color:rgb(93, 17, 32);color:rgb(248, 226, 199);"][font size="6"][div align="center"]RP Title[/div][/font][/td][/tr][/tbody][/table][table style="width:100%;height:auto;text-align:center;background-color:#af8a5e;border-left:5px solid #801b24;border-bottom:solid 5px #5d1120;"][tbody][tr][td style="height:30px;width:100%;background-color:#af8a5e;color:#000000;border:none;"]
[div style="text-align:left;border:20px solid rgb(248, 226, 199);background-color:rgb(248, 226, 199);width:40%;height:100%;float:right;margin-right:15%;margin-top:5%;"]RP Summary, location, characters, whatever! You can use hyperlinks and stuff too![/div][div style="width:150px;height:150px;background-image:url(https://i.imgur.com/ndEfNvS.png);border-radius:100%;margin-left:6%;border-right:5px solid #801b24;border-bottom:3px solid #5d1120;"] [/div]
[/td][/tr][/tbody][tbody][tr][td style="height:auto;width:100%;border-width:1px;border-style:solid;border-color:rgb(175, 138, 94);background-color:rgb(175, 138, 94);color:rgb(0, 0, 0);"]
[table style="border:1px solid rgb(175, 138, 94);width:90%;margin:1px auto;text-align:center;"][tbody][tr][td style="text-align:left;height:20px;width:33.3333%;border-width:1px;border-style:solid;border-color:rgb(175, 138, 94);background-color:rgb(93, 17, 32);color:rgb(248, 226, 199);"]• Previous:                [/td][td style="height:20px;width:10%;border-width:1px;border-style:solid;border-color:rgb(175, 138, 94);background-color:rgb(175, 138, 94);color:rgb(0, 0, 0);"]
[/td][td style="text-align:left;height:20px;width:33.3333%;border-width:1px;border-style:solid;border-color:rgb(175, 138, 94);background-color:rgb(93, 17, 32);color:rgb(248, 226, 199);"]•Next:
[/td][/tr][tr][td style="height:5px;border-width:1px;border-style:solid;border-color:rgb(175, 138, 94);background-color:rgb(175, 138, 94);color:rgb(0, 0, 0);" colspan="3"][/td][/tr][tr][td style="height:10px;border-width:1px;border-style:solid;border-color:rgb(175, 138, 94);background-color:rgb(93, 17, 32);color:rgb(175, 138, 94);" colspan="3"][b][#]Testing [#]Organization [#]HelpPlz[/b][/td][/tr][/tbody][/table][/td][/tr][/tbody][/table]