Jump to content

[Solved] HTML Table Help Please <3

ThistleProse

By ThistleProse,
in Coding Help & Requests

 Share

Recommended Posts

ThistleProse    8

ThistleProse
Posted (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!!

 

df72b74402edad405733f616226b0c3b.png

  


<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%">&nbsp;</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%">&nbsp;</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%">&nbsp;</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>&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
    </div>
</div>
Edited by ThistleProse

HaLp2lk.png
October-2017.png 

Link to comment
Share on other sites
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

  • Admin

Morrigan    1,826

Morrigan
  • Admin
Posted

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?

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

ThistleProse    8

ThistleProse
  • Author
Posted

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.

 

64cbaca8b362d071ac13b034955b31d7.png

HaLp2lk.png
October-2017.png 

Link to comment
Share on other sites

FizzyElf    13

FizzyElf
Posted

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

FizzyElf    13

FizzyElf
Posted

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
  • 4 weeks later...

ThistleProse    8

ThistleProse
  • Author
Posted

@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! 😄

HaLp2lk.png
October-2017.png 

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept