HTML fluid containers or tables?

Posted 6 years, 6 months ago (Edited 6 years, 6 months ago) by CuddlySpider

Hello So I have been working on a character profile http://toyhou.se/1306704.profile-layout-base

When I make the page too small it messes up the tables. I know there is a way to making them fluid or change with the window size, however I have no idea how this works?

I see it being used when I look at other's codes for reference, but I am confused on how to use it exactly. A detailed explanation would be greatly appreciated!

If you want to look at the current code:

<table align="center" class="mx-auto mt-0 mb-3 border-0" style="width: 85%;">
    <tbody>
        <tr>
            <td>

                <blockquote>

                    <p class="text-primary"><sup><span style="font-size: 18px;">❝</span></sup><span style="font-size: 18px;"><strong>&nbsp;Quote here.</strong></span></p>
                </blockquote>
            </td>
        </tr>
    </tbody>
</table>

<h1 class="bg-primary text-white p-2 text-center rounded">Basics</h1>

<table align="center" class="mx-auto mt-0 mb-3 border-0" style="width: 65%;">
    <tbody>
        <tr>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Name</p>
            </td>
            <td style="vertical-align: top; width: 30%;">name here</td>
            <td style="vertical-align: top; text-align: right; width: 20;">

                <p class="text-primary">Nickname/s</p>
            </td>
            <td style="vertical-align: top; width: 30%;">nicknames here</td>
        </tr>
        <tr>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Age</p>
            </td>
            <td style="vertical-align: top; width: 30%;">age here</td>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Measurements</p>
            </td>
            <td style="vertical-align: top; width: 30%;">measurements here</td>
        </tr>
        <tr>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Pronouns</p>
            </td>
            <td style="vertical-align: top; width: 30%;">pronouns here</td>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Species</p>
            </td>
            <td style="vertical-align: top; width: 30%;">species here</td>
        </tr>
        <tr>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Gender</p>
            </td>
            <td style="vertical-align: top; width: 30%;">gender here</td>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Ethnicity</p>
            </td>
            <td style="vertical-align: top; width: 30%;">ethnicity here</td>
        </tr>
        <tr>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Orientation</p>
            </td>
            <td style="vertical-align: top; width: 30%;">orientation here</td>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Place or Origin</p>
            </td>
            <td style="vertical-align: top; width: 30%;">origin here</td>
        </tr>
        <tr>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Occupation</p>
            </td>
            <td style="vertical-align: top; width: 30%;">occupation here</td>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Residence</p>
            </td>
            <td style="vertical-align: top; width: 30%;">residence here</td>
        </tr>
        <tr>
            <td style="vertical-align: top; text-align: right; width: 20%;">

                <p class="text-primary">Status</p>
            </td>
            <td style="vertical-align: top; width: 30%;">status here</td>
            <td style="vertical-align: top; text-align: right; width: 20%;">
                <br>
            </td>
            <td style="vertical-align: top; width: 30%;">
                <br>
            </td>
        </tr>
    </tbody>
</table>

<p>
    <br>
</p>

<h1 class="bg-primary text-white p-2 text-center rounded">Traits</h1>
<div style="margin-left:5%;">

    <table align="center" class="mx-auto mt-0 mb-3 border-0" style="width: 90%; margin-left: calc(100% - 90% - 0%);">
        <tbody>
            <tr>
                <td style="width: 45%; vertical-align: top;">
                    <div style="text-align: center;">

                        <h4 class="text-primary" style="margin-left: 20px;">Active</h4>
                    </div>

                    <table align="left" class="mx-auto mt-0 mb-3 border-0" style="width: 100%;">
                        <tbody>
                            <tr>
                                <td style="text-align: right; vertical-align: top; width: 39.8951%;"><strong>Strength</strong></td>
                                <td style="vertical-align: top; width: 60.1049%;">- - - - -|- - - - -</td>
                            </tr>
                            <tr>
                                <td style="text-align: right; vertical-align: top; width: 39.8951%;"><strong>Agility</strong></td>
                                <td style="vertical-align: top; width: 60.1049%;">- - - - -|- - - - -</td>
                            </tr>
                            <tr>
                                <td style="text-align: right; vertical-align: top; width: 39.8951%;"><strong>Speed</strong></td>
                                <td style="vertical-align: top; width: 60.1049%;">- - - - -|- - - - -</td>
                            </tr>
                            <tr>
                                <td style="text-align: right; vertical-align: top; width: 39.8951%;"><strong>Stamina</strong></td>
                                <td style="vertical-align: top; width: 60.1049%;">- - - - -|- - - - -</td>
                            </tr>
                            <tr>
                                <td style="text-align: right; vertical-align: top; width: 39.8951%;"><strong>Resistance</strong></td>
                                <td style="vertical-align: top; width: 60.1049%;">- - - - -|- - - - -</td>
                            </tr>
                            <tr>
                                <td style="text-align: right; vertical-align: top; width: 39.8951%;"><strong>Magic</strong></td>
                                <td style="vertical-align: top; width: 60.1049%;">- - - - -|- - - - -</td>
                            </tr>
                            <tr>
                                <td style="text-align: right; vertical-align: top; width: 39.8951%;"><strong>Willpower</strong></td>
                                <td style="vertical-align: top; width: 60.1049%;">- - - - -|- - - - -</td>
                            </tr>
                            <tr>
                                <td style="text-align: right; vertical-align: top; width: 39.8951%;"><strong>Charisma</strong></td>
                                <td style="vertical-align: top; width: 60.1049%;">- - - - -|- - - - -</td>
                            </tr>
                            <tr>
                                <td style="text-align: right; vertical-align: top; width: 39.8951%;"><strong>Perceptive</strong></td>
                                <td style="vertical-align: top; width: 60.1049%;">- - - - -|- - - - -
                                    <br>
                                    <br>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div style="text-align: center;">

                        <h4 class="text-primary" style="margin-lefta: 40px;">
                            <br>
                        </h4>

                        <h4 class="text-primary" style="margin-lefta: 40px;">Skills/Abilities</h4>
                    </div>

                    <table align="center" class="mx-auto mt-0 mb-3 border-0" style="width: 95%;">
                        <tbody>
                            <tr>
                                <td>

                                    <ul style="list-style-type: circle;">
                                        <li>-</li>
                                        <li>-</li>
                                        <li>-</li>
                                        <li>-</li>
                                        <li>-</li>
                                        <li>-</li>
                                        <li>-</li>
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div style="text-align: center;">

                        <h4 class="text-primary" style="margin-left: 20px;">Interests</h4>
                    </div>

                    <table align="center" class="mx-auto mt-0 mb-3 border-0" style="width: 100%;">
                        <tbody>
                            <tr>
                                <td style="text-align: center; vertical-align: top; width: 50%;">

                                    <p class="text-primary">&nbsp; &nbsp; &nbsp; &nbsp; Dislikes</p>
                                </td>
                                <td style="text-align: center; vertical-align: top; width: 50%;">

                                    <p class="text-primary">&nbsp; &nbsp; &nbsp; &nbsp; Likes</p>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: left; vertical-align: top; width: 50%;">

                                    <ul style="list-style-type: none;">
                                        <li>𝗫 -</li>
                                        <li>𝗫 -</li>
                                        <li>𝗫 -</li>
                                        <li>𝗫 -</li>
                                    </ul>
                                </td>
                                <td style="text-align: left; vertical-align: top; width: 50%;">

                                    <ul style="list-style-type: none;">
                                        <li>♡ -</li>
                                        <li>♡ -</li>
                                        <li>♡ -</li>
                                        <li>♡ -</li>
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td style="vertical-align: top; width:55%;">
                    <div style="text-align: center;">

                        <h4 class="text-primary">Personality</h4>
                    </div>

                    <table align="center" class="mx-auto mt-0 mb-3 border-0" style="width: 100%; margin-right: calc(100% - 100% - 0%);">
                        <tbody>
                            <tr>
                                <td style="text-align: right;"><span title="Gets energy from solitude.">Introvert(I)</span></td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td><span title="Gets energy from social spaces.">Extrovert(E)</span></td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><span title="Not very willing to share private information.">Reserved</span></td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td><span title="Like an open book.">Outgoing</span></td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">
                                    <br>
                                </td>
                                <td style="text-align: center;">
                                    <br>
                                </td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><span title="Highly practical, pragmatic and down-to-earth. They tend to have strong habits and focus on what is happening or has already happened.">Observing(S)</span></td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td><span title="Very imaginative, open-minded and curious. They prefer novelty over stability and focus on hidden meanings and future possibilities.">Intuiting(N)</span></td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><span title="Careful around unfamiliar things or in general.">Cautious</span></td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td><span title="Explores unfamiliar things with curiosity. ">Curious</span></td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">
                                    <br>
                                </td>
                                <td style="text-align: center;">
                                    <br>
                                </td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><span title="Sensitive and emotionally expressive. They are more empathic and less competitive, and focus on social harmony and cooperation.">Feeling(F)</span></td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td><span title="focus on objectivity and rationality, prioritizing logic over emotions. They tend to hide their feelings and see efficiency as more important than cooperation.">Thinking(T)</span></td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">Detached</td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td>Friendly</td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><span title="Can feel another's feelings. Able to walk in another person's shoes."><strong>Empathy</strong></span></td>
                                <td style="text-align: center; width:125px;"><strong>- - - - -|- - - - -</strong></td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><span title="Feeling sorry for another's suffering."><strong>Sympathy</strong></span></td>
                                <td style="text-align: center; width:125px;"><strong>- - - - -|- - - - -</strong></td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><span title="Taking action when another is hurting. Drive to to what they can to help."><strong>Compassion</strong></span></td>
                                <td style="text-align: center; width:125px;"><strong>- - - - -|- - - - -</strong></td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">
                                    <br>
                                </td>
                                <td style="text-align: center;">
                                    <br>
                                </td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><span title="Very good at improvising and spotting opportunities. They tend to be flexible, relaxed nonconformists who prefer keeping their options open.">Perceiving(P)</span></td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td><span title="Decisive, thorough and highly organized. They value clarity, predictability and closure, preferring structure and planning to spontaneity.">Judging(J)</span></td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">Sloppy</td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td>Organized</td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">Careless</td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td>Self-Disciplined</td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><strong>Problem Solving</strong></td>
                                <td style="text-align: center; width:125px;"><strong>- - - - -|- - - - -</strong></td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">
                                    <br>
                                </td>
                                <td style="text-align: center;">
                                    <br>
                                </td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">Nervous</td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td>Confident</td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><span title="Self-conscious and sensitive to stress. They are likely to experience a wide range of emotions and to be success-driven, perfectionistic and eager to improve.">Turbulent(-T)</span></td>
                                <td style="text-align: center; width:125px;">- - - - -|- - - - -</td>
                                <td><span title="Self-assured, even-tempered and resistant to stress. They refuse to worry too much and do not push themselves too hard when it comes to achieving goals.">Assertive(-A)</span></td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">
                                    <br>
                                </td>
                                <td style="text-align: center;">
                                    <br>
                                </td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <br>
                                </td>
                                <td style="text-align: center;"><strong>Self Image</strong></td>
                                <td>
                                    <br>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;"><strong>Negative</strong></td>
                                <td style="text-align: center; width:125px;"><strong>- - - - -|- - - - -</strong></td>
                                <td><strong>Positive</strong></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<p>
    <br>
</p>

<h1 class="bg-primary text-white p-2 text-center rounded">Relationships</h1>

<table align="center" class="mx-auto mt-0 mb-3 border-0" style="width: 70%;">
    <tbody>
        <tr>
            <td style="text-align: center;">
                <a class="img-thumbnail mx-2" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" height="100" width="100"></a>
                <br><a href=""><strong>Name</strong></a>
                <br>Relationship status</td>
            <td style="text-align: center;">
                <a class="img-thumbnail mx-2" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" height="100" width="100"></a>
                <br><a href=""><strong>Name</strong></a>
                <br>Relationship status</td>
            <td style="text-align: center;">
                <a class="img-thumbnail mx-2" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" height="100" width="100"></a>
                <br><a href=""><strong>Name</strong></a>
                <br>Relationship status</td>
        </tr>
        <tr>
            <td style="text-align: center;">
                <a class="img-thumbnail mx-2" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" height="100" width="100"></a>
                <br><a href=""><strong>Name</strong></a>
                <br>Relationship status</td>
            <td style="text-align: center;">
                <a class="img-thumbnail mx-2" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" height="100" width="100"></a>
                <br><a href=""><strong>Name</strong></a>
                <br>Relationship status</td>
            <td style="text-align: center;">
                <a class="img-thumbnail mx-2" href=""><img src="https://pixy.org/images/placeholder.png" class="fr-fic fr-dii" height="100" width="100"></a>
                <br><a href=""><strong>Name</strong></a>
                <br>Relationship status</td>
        </tr>
    </tbody>
</table>

<p>
    <br>
</p>

<h1 class="bg-primary text-white p-2 text-center rounded">Biography</h1>

<table align="center" class="mx-auto mt-0 mb-3 border-0" style="width: 85%;">
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

<p>
    <br>
</p>

<h1 class="bg-primary text-white p-2 text-center rounded">Appearance Notes</h1>

<table align="center" class="mx-auto mt-0 mb-3 border-0" style="width: 85%;">
    <tbody>
        <tr>
            <td>

                <ul style="list-style-type: circle;">
                    <li>-</li>
                    <li>-</li>
                    <li>-</li>
                    <li>-</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>
SchwarzerAlptraum

Do you mean display flex? You can use those, with the caveat that the .col class, which you can use for flex: 1 layouts includes extra padding and doesn't exactly work like flex: 1, which I never got that to work inline. Instead, I found a different one you can use called media-body.

There is another CSS feature called media-query you can use to respond to window sizes, but I don't think that's supported in HTML templates either.

CuddlySpider

SchwarzerAlptraum

Thank you c: for some reason i didn't get a notification even tho i'm subscribed to this thread.

But I believe I figured it out. That page is very helpful though so might help me with tweeking the parts that aren't doing what i want.