ThistleProse 8 Share Posted October 14, 2019 (edited) Hello! I'm having a hell of a time with this damn table! All I want it to do is have each of the columns be equal, but it just *won't* and its driving me bonkers!! I've included a screenshot of what it turns into on the site, as well as the code I'm using below. Please. for my sanity. Help me! lol ❤️ Thank you!! <style> @import url('https://fonts.googleapis.com/css?family=Bellefair|Bilbo+Swash+Caps|Fondamento|Indie+Flower'); .ProfileOutside {width: auto; height: auto; padding: 10px; border: 10px solid #{$userfields['fid33']}; border-radius: 50px 50px; line-height: 160%; color: #{$userfields['fid33']}; font-family: calibri; font-size: 15px; margin-left: auto; margin-right: auto; background-image: url("{$userfields['fid32']}"); background-repeat: repeat;} .ProfileInside {width: auto; padding: 5px; height: auto; border: 5px solid #{$userfields['fid33']}; margin-left: auto; margin-right: auto; background-color: rgba({$userfields['fid41']}, .9); border-radius: 50px 50px; white-space: pre-line;} .ProfileName {font-family: 'Fondamento', cursive; padding: 2px; letter-spacing: 5px; line-height: 1; font-size: 75px; color: #{$userfields['fid37']}; margin:auto; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']};} .ProfileRank {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 7px; line-height: 0; font-size: 55px; padding: 10px 0px 10px 0px; text-align: center; color: #{$userfields['fid36']}; text-shadow: 0 -2px 3px #{$userfields['fid37']},0 3px 4px #{$userfields['fid37']};} /*Major Title Headers*/ .ProfileTitle2 {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 55px; color: #{$userfields['fid37']}; text-align: center; background-color:#{$userfields['fid35']}; border-radius: 10px; border: 8px; padding:8px; padding: 10px 50px 0px 0px; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']};} /*Mini Title Headers*/ .ProfileTitle {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 35px; color: #{$userfields['fid50']}; text-align: center; background-color:#{$userfields['fid34']}; border-radius: 5px; border: 1px; padding:1px; padding: 0px 20px 0px 0px;} .ProfileJusitfy {font-family: Arial; font-size: 17px; padding: 0px 9px; text-align: justify; min-height: 25px !important; color: #{$userfields['fid36']};} .ProfileImage{margin-left: auto; margin-right:auto; border:3px solid #{$userfields['fid36']};background-color:#{$userfields['fid34']}; border-radius: 50px 50px; max-width: 300px; min-width: 300px; padding:5px; color: #{$userfields['fid36']};} .ProfilePrompt1 {font-family: font-family: 'Bellefair', serif; font-size: 19px; color: #{$userfields['fid33']}; text-align: center; border-radius: 5px; border: 1px; padding:1px;} .ProfileSpaceFiller {min-height: 250px;} @media only screen and (max-width: 600px) { thead th:not(:first-child) { display: none; } td, th { display: block; min-width: 100%; } td[data-th]:before { content: attr(data-th); width: 100% !important; } .ProfileName {line-height: 1 !important; font-size: 45px !important;} .ProfileImage {max-width: 150px !important;} } </style> <div class="ProfileOutside"><div class="ProfileInside"><table height="auto" border="0" class="ProfileJusitfy" cellpadding="5px"> <tr valign="top"> <td colspan="5" data-th><p align="center"><div class="ProfileName" align="center">{$userfields['fid7']}</div> <div class="ProfileRank" align="center"> <if $userfields['fid30'] then> <func htmlspecialchars_uni>{$userfields['fid30']} {$userfields['fid4']}</func> <elseif $userfields['fid31'] then><func htmlspecialchars_uni>{$userfields['fid31']} {$userfields['fid4']}</func> <else />{$userfields['fid4']}</if> </div><br /></td> </tr> <tr valign="top" class="ProfileJusitfy"> <td width="20%" rowspan="6" align="center" valign="top" data-th><img src="{$userfields['fid38']}" width="300px" height="500px" class="ProfileImage"> <div class="ProfileImage" align="center"><i>{$userfields['fid27']}</i></span></div><br /></td> <td colspan="2" data-th><div class="ProfileTitle">Nicknames:</div> {$userfields['fid5']}</td> <td colspan="2" data-th><div class="ProfileTitle">Occupation:</div> {$userfields['fid6']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Date of Birth:</div> {$membday} {$membdayage}</td> <td colspan="2" data-th><div class="ProfileTitle">Age Apparent:</div> {$userfields['fid8']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Biological Sex:</div> {$userfields['fid42']}</td> <td colspan="2" data-th><div class="ProfileTitle">Gender Apparent:</div> {$userfields['fid43']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Pronouns:</div> {$userfields['fid44']}</td> <td colspan="2" data-th><div class="ProfileTitle">Partner:</div> {$itscomplicatedRelationships}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Player:</div> {$masteraccount}</td> <td colspan="2" data-th><div class="ProfileTitle">Inactivity Preference:</div> {$userfields['fid29']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="4" data-th height="100%"> </td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="5" data-th><div class="ProfileTitle2">Appearance</div><br /></td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Eye Colour:</div> {$userfields['fid9']}</td> <td colspan="2" data-th><div class="ProfileTitle">Hair Colour:</div> {$userfields['fid10']}</td> <td width="20%" rowspan="3" align="center" valign="top" data-th><img src="{$userfields['fid39']}" width="300px" height="500px" class="ProfileImage"> <div class="ProfileImage" align="center"><i>{$userfields['fid27']}</i></span></div><br /></td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Height:</div> {$userfields['fid11']}</td> <td colspan="2" data-th height="100%"><div class="ProfileTitle">Build:</div> {$userfields['fid46']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="4" data-th><div class="ProfileTitle">General Description:</div> {$userfields['fid13']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="5" data-th><div class="ProfileTitle">General Dressing Style:</div> {$userfields['fid12']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="5" data-th><div class="ProfileTitle2">Personality</div></td> </tr> <tr valign="top" class="ProfileJusitfy"> <td rowspan="3" valign="top" data-th align="center"><img src="{$userfields['fid40']}" width="300px" height="500px" class="ProfileImage"> <div class="ProfileImage" align="center"><i>{$userfields['fid27']}</i></span></div><br /></td> <td colspan="2" data-th><div class="ProfileTitle">Likes:</div> {$userfields['fid15']}</td> <td colspan="2" data-th><div class="ProfileTitle">Dislikes:</div> {$userfields['fid16']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Strengths:</div> {$userfields['fid17']}</td> <td colspan="2" data-th><div class="ProfileTitle">Flaws:</div> {$userfields['fid18']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="4" data-th height="100%"> </td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="5" data-th><div class="ProfileTitle">General Personality:</div> {$userfields['fid14']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="5" data-th><div class="ProfileTitle2">History</div></td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Parents:</div> {$userfields['fid20']}</td> <td colspan="2" data-th><div class="ProfileTitle">Past Romances:</div> {$userfields['fid23']}</td> <td rowspan="4" data-th align="center"><img src="{$userfields['fid47']}" width="300px" height="500px" class="ProfileImage"> <div class="ProfileImage" align="center"><i>{$userfields['fid27']}</i></span></div><br /></td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Siblings:</div> {$userfields['fid22']}</td> <td colspan="2" data-th><div class="ProfileTitle">Offspring:</div> {$userfields['fid24']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="2" data-th><div class="ProfileTitle">Secrets:</div> {$userfields['fid48']}</td> <td colspan="2" data-th><div class="ProfileTitle">General Knowledge:</div> {$userfields['fid49']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="4" data-th height="100%"> </td> </tr> <tr valign="top" class="ProfileJusitfy"> <td colspan="5" data-th><div class="ProfileTitle">Detailed History:</div> {$userfields['fid25']}</td> </tr> <tr valign="top" class="ProfileJusitfy"> <td> </td> <td width="20%"> </td> <td width="20%"> </td> <td width="20%"> </td> <td> </td> </tr> </table> </div> </div> Edited October 16, 2019 by ThistleProse Link to comment Share on other sites More sharing options...
Admin Morrigan 1,826 Admin Share Posted October 18, 2019 Could you explain what your end goal is? Is Personality supposed to be up on the right? And the ones at odd width sizes to be even? Profile set made by myself and original Artwork by Fae Merriman, my daughter. Link to comment Share on other sites More sharing options...
ThistleProse 8 Author Share Posted October 21, 2019 Hi @Morrigan - sorry for the delay 😮 So, yeah. I'd like the columns of information to be equal. The closest I could get was setting them as fixed, but then they were... fixed lol, and didn't sit inside the outer boxes. I did attempt to try recoding with flexiboxes, but I ended up just making an awful mess lmao. Anyway, please see the bigarse image below! Ideally, the input areas will all be the same width instead of willy-nilly. Also, I thought I had coded the General Description to bounce on up under the two height and build, but I likely removed it trying to fix something else. I'm prone to doing that not going to lie. My co and I are both anti-scroll boxes. I know I could make it all fit in there very neatly with scroll boxes, but we both hate them with a passion lmao so here we are. Link to comment Share on other sites More sharing options...
FizzyElf 13 Share Posted October 25, 2019 Best bet would be to make a separate table for each section (appearance, personality, etc) if you want the image to be fixed width and the other two equal in the remaining space, because what's messing it up is that the columns don't line up in each section, and even mucking around with colspan isn't going to be able to fix that. If you want 3 equal columns and the image to scale, and you've got a max-width in there, so I suspect that's what you intended? If so then take all the colspan=2s out, add width:100% to the css for .ProfileImage, and add .ProfileJustify td:not([colspan]) {width: 33.3%} Link to comment Share on other sites More sharing options...
ThistleProse 8 Author Share Posted October 29, 2019 @FizzyElf - thanks for the suggestion! It didn't make any difference 😞 Link to comment Share on other sites More sharing options...
FizzyElf 13 Share Posted November 4, 2019 Try this (I only converted the first couple sections to see if it's what you want) <style> @import url('https://fonts.googleapis.com/css?family=Bellefair|Bilbo+Swash+Caps|Fondamento|Indie+Flower'); .ProfileOutside {width: auto; height: auto; padding: 10px; border: 10px solid #{$userfields['fid33']}; border-radius: 50px 50px; line-height: 160%; color: #{$userfields['fid33']}; font-family: calibri; font-size: 15px; margin-left: auto; margin-right: auto; background-image: url("{$userfields['fid32']}"); background-repeat: repeat;} .ProfileInside {width: auto; padding: 5px; height: auto; border: 5px solid #{$userfields['fid33']}; margin-left: auto; margin-right: auto; background-color: rgba({$userfields['fid41']}, .9); border-radius: 50px 50px; white-space: pre-line;} .ProfileName {text-align: center; font-family: 'Fondamento', cursive; padding: 2px; letter-spacing: 5px; line-height: 1; font-size: 75px; color: #{$userfields['fid37']}; margin:auto; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']};} .ProfileRank {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 7px; line-height: 0; font-size: 55px; padding: 10px 0px 10px 0px; text-align: center; color: #{$userfields['fid36']}; text-shadow: 0 -2px 3px #{$userfields['fid37']},0 3px 4px #{$userfields['fid37']};} /*Major Title Headers*/ .ProfileTitle2 {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 55px; color: #{$userfields['fid37']}; text-align: center; background-color:#{$userfields['fid35']}; border-radius: 10px; border: 8px; padding:8px; padding: 10px 50px 0px 0px; text-shadow: 0 -2px 3px #{$userfields['fid33']},0 3px 4px #{$userfields['fid35']};} /*Mini Title Headers*/ .ProfileTitle {font-family: 'Bilbo Swash Caps', cursive; letter-spacing: 3px; font-size: 35px; color: #{$userfields['fid50']}; text-align: center; background-color:#{$userfields['fid34']}; border-radius: 5px; border: 1px; padding:1px; padding: 0px 20px 0px 0px;} .ProfileJusitfy {font-family: Arial; font-size: 17px; padding: 0px 9px; text-align: justify; min-height: 25px !important; color: #{$userfields['fid36']};} .ProfileImage{margin-left: auto; margin-right:auto; border:3px solid #{$userfields['fid36']};background-color:#{$userfields['fid34']}; border-radius: 50px 50px; width: 290px; padding:5px; color: #{$userfields['fid36']};} .ProfilePrompt1 {font-family: font-family: 'Bellefair', serif; font-size: 19px; color: #{$userfields['fid33']}; text-align: center; border-radius: 5px; border: 1px; padding:1px;} .ProfileSpaceFiller {min-height: 250px;} .ProfileImageDesc {text-align: center;} .columns {display: grid; justify-items: top;} .columns.picture-left {grid-template-columns: [pic] 300px [col1] 50fr [col2] 50fr;} .columns.picture-right {grid-template-columns: [col1] 50fr [col2] 50fr [pic] 300px;} .ProfileImageBox {grid-column-start: pic; grid-row-start: 1; grid-row-end: span 2; } .col1 {grid-column-start: col1;} .col2 {grid-column-start: col2;} .colBoth {grid-column-start: col1; grid-column-end: span 2} @media only screen and (max-width: 600px) { .ProfileName {line-height: 1 !important; font-size: 45px !important;} .ProfileImage {width: 140px !important;} .coluns.picture-left {grid-template-columns: [pic] 150px [col1] 50fr [col1] 50fr;} .columns.picture-right {grid-template-columns: [col1] 50fr [col2] 50fr [pic] 150px;} } </style> <div class="ProfileOutside"><div class="ProfileInside"> <div class="ProfileSection"> <div class="top"> <div class="ProfileName">{$userfields['fid7']}</div> <div class="ProfileRank"> <if $userfields['fid30'] then> <func htmlspecialchars_uni>{$userfields['fid30']} {$userfields['fid4']}</func> <elseif $userfields['fid31'] then><func htmlspecialchars_uni>{$userfields['fid31']} {$userfields['fid4']}</func> <else />{$userfields['fid4']}</if> </div> </div> <div class="columns picture-left"> <div class="ProfileImageBox" > <img src="{$userfields['fid38']}" class="ProfileImage"> <div class="ProfileImageDesc"><i>{$userfields['fid27']}</i></div> </div> <div class="col1"> <div><div class="ProfileTitle">Nicknames:</div> {$userfields['fid5']}</div> <div><div class="ProfileTitle">Date of Birth:</div> {$membday} {$membdayage}</div> <div><div class="ProfileTitle">Biological Sex:</div> {$userfields['fid42']}</div> <div><div class="ProfileTitle">Pronouns:</div> {$userfields['fid44']}</div> <div><div class="ProfileTitle">Player:</div> {$masteraccount}</div> </div> <div class="col2"> <div><div class="ProfileTitle">Occupation:</div> {$userfields['fid6']}</div> <div><div class="ProfileTitle">Age Apparent:</div> {$userfields['fid8']}</div> <div><div class="ProfileTitle">Gender Apparent:</div> {$userfields['fid43']}</div> <div><div class="ProfileTitle">Partner:</div> {$itscomplicatedRelationships}</div> <div><div class="ProfileTitle">Inactivity Preference:</div> {$userfields['fid29']}</div> </div> </div> </div> <div class="ProfileSection"> <div class="top"> <div class="ProfileTitle2">Appearance</div> </div> <div class="columns picture-right"> <div class="col1"> <div><div class="ProfileTitle">Height:</div> {$userfields['fid11']}</div> <div><div class="ProfileTitle">General Description:</div> {$userfields['fid13']}</div> </div> <div class="col2"> <div><div class="ProfileTitle">Build:</div> {$userfields['fid46']}</div> </div> <div class="colBoth"> <div><div class="ProfileTitle2">General Dressing Style:</div> {$userfields['fid12']}</div> <div><div class="ProfileTitle2">Personality</div></div> </div> <div class="ProfileImageBox"> <img src="{$userfields['fid40']}" class="ProfileImage"> <div class="ProfileImageDesc"><i>{$userfields['fid27']}</i></div> </div> </div> </div> </div></div> Link to comment Share on other sites More sharing options...
ThistleProse 8 Author Share Posted November 27, 2019 @FizzyElf - thank you so much! This worked perfectly! I just have the CSS to mess with to make it pretty and so such but it works wonderfully! THANK YOU! 😄 Link to comment Share on other sites More sharing options...
Recommended Posts