Menu
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;
}
671
asked Dec 11 '25 22:12
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.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
