How to keep same distance between objects, even if the text in these are not the same

Question

I'm a little new to web so I wondered how to space my objects equally even with not the same text.

As soon as I change my text from my TD, if it's not the same as the other TD content, it will scale different and not be equally spaced. For ex. if I change the first TD text to "hello world", the padding will be less spaced.

Here are some screenshots:

Different text Screenshot

Same text Screenshot

Thanks for your help!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Index</title>
    <script src="../Services/js/anim.js"></script>

</head>
<body>
<header>

    <a href="#" class="logo">Services-tech.fr</a>

    <div id="menu-bar" class="fas fa-bars"></div>

    <nav class="nav">
        <a href="index.html">Index</a>
        <a href="about.html">A propos</a>
        <a href="services.html">Services</a>
    </nav>

</header>
<section class="services" id="services">
    <h3>Nos services</h3>
    <div class="services-list">
        <table>
            <tr>
                <th><img src="../Services/Images/screen.png" alt=""></th>
                <th><img src="../Services/Images/website.png" alt=""></th>
                <th><img src="../Services/Images/console.png" alt=""></th>
                <th><img src="../Services/Images/others.png" alt=""></th>
            </tr>
            <tr>
                <td>
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                </td>
                <td>
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                </td>
                <td>
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                </td>
                <td>
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                    orem ipsum dolor sit amet consectetur adipisicing elit. Ex ducimus quis tenetur sed accusantiu
                </td>
            </tr>
            <tr>
                <td class="box-btn">
                    <a href="#first-service" class="btn-2">En savoir plus</a>
                </td>
                <td class="box-btn">
                    <a href="#second-service" class="btn-2">En savoir plus</a>
                </td>
                <td class="box-btn">
                    <a href="#third-service" class="btn-2">En savoir plus</a>
                </td>
                <td class="box-btn">
                    <a href="#last-service" class="btn-2">En savoir plus</a>
                </td>
            </tr>
        </table>
    </div>
</section>

CSS styling:

.services {
    background:black;
}

.services h3 {
    display:block;
    text-align: center;
    font-size:3em;
    color:white;
}

.services-list table {
    color:white;
    background-color:black;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    margin-top:10em;
    text-align: center;
}

.services-list img {
    width: 5em;
}

.services-list th {
    padding-left:4em; padding-right:4em;
}

.services-list td {
    padding: 0.5em 4em;
}

.btn-2 {
    margin-top:1.5em;
    background: white;
    width:150px;
    padding: 10px 0;
    border-radius:2px;
    text-align: center;
    text-transform: uppercase;
    color:black;
    cursor:pointer;
}

.btn-2:hover{
    background: linear-gradient(to right, #9D31FE, #1BA3D8);
    color:black;
}

may be this will help https://stackoverflow.com/questions/1457563/equal-sized-table-cells-to-fill-the-entire-width-of-the-containing-table — atomankion, Mar 14 '22 at 08:57
Hello @Sdev, using table in a layout like this is not so usual. I suggest you to built that layout with `div`s. So you can use things like `display: flex` or `display: grid`. If you replace your table with a div you can use `flex: 1` on every div to make them equal or if you use `display: grid` you can use `grid-template-columns: 1fr 1fr 1fr 1fr` to make 4 equals width divs. Instead of using percentage width to your table headers using divs is better. — Sefa Şahinoğlu, Mar 14 '22 at 09:16

score 5 · Accepted Answer · answered Mar 14 '22 at 09:04

A simple fix for this is fixed width for your table cell, just add the following styles in your CSS file.

.services-list th {
  width: 25%;
}

Table cell width does change according to its content width. So normally you need fixed width for them if you want your table cell to have the same width equally. But if you're able to change the HTML, don't use tables for layout since it's not meant to be a tool for layout. Instead, use divs with CSS like flex or grid this will make your dev life a whole lot better.

How to keep same distance between objects, even if the text in these are not the same

1 Answers1