Fixer la taille des colonnes d'un tableau avec un texte long en HTML

Tableau de départ:

<!DOCTYPE html>
<head>
<style style="text/css">
table{
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
}
</style> 
</head>
<html>
<body>

<table>
<tr>
<td>Bob</td>
<td>Bill</td>
<td>Boule</td>
</tr>
<tr>
<td>texte_tres_tres_tres_tres_tres_tres_tres_tres_long</td>
<td>23</td>
<td>14</td>
</tr>
</table>

</body>
</html>

Avoir les colonnes de la meme largeur:

Fixer la taille des colonnes d'un tableau avec un texte long en HTML (2/4): Colonnes de meme largeur

<!DOCTYPE html>
<head>
<style style="text/css">
table{
    border: 1px solid black;
    border-collapse: collapse;
    table-layout: fixed;
    width: 400px;       
}

th, td {
    border: 1px solid black;
}
</style> 
</head>
<html>
<body>

<table>
<tr>
<td>Bob</td>
<td>Bill</td>
<td>Boule</td>
</tr>
<tr>
<td>texte_tres_tres_tres_tres_tres_tres_tres_tres_long</td>
<td>23</td>
<td>14</td>
</tr>
</table>

</body>
</html>

Option 1: cacher le texte

Fixer la taille des colonnes d'un tableau avec un texte long en HTML (3/4): cacher le texte

<!DOCTYPE html>
<head>
<style style="text/css">
table{
    border: 1px solid black;
    border-collapse: collapse;
    table-layout: fixed;
    width: 400px;  
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;    
}
</style> 
</head>
<html>
<body>

<table>
<tr>
<td>Bob</td>
<td>Bill</td>
<td>Boule</td>
</tr>
<tr>
<td>texte_tres_tres_tres_tres_tres_tres_tres_tres_long</td>
<td>23</td>
<td>14</td>
</tr>
</table>

</body>
</html>

Option 2: casser le texte

Fixer la taille des colonnes d'un tableau avec un texte long en HTML (4/4): casser le texte

<!DOCTYPE html>
<head>
<style style="text/css">
table{
    border: 1px solid black;
    border-collapse: collapse;
    table-layout: fixed;
    width: 400px;  
}

th, td {
    border: 1px solid black;
    word-break: break-all;
}
</style> 
</head>
<html>
<body>

<table>
<tr>
<td>Bob</td>
<td>Bill</td>
<td>Boule</td>
</tr>
<tr>
<td>texte_tres_tres_tres_tres_tres_tres_tres_tres_long</td>
<td>23</td>
<td>14</td>
</tr>
</table>

</body>
</html>

Recherches associées

Liens	Site
CSS text-overflow in a table cell?	stackoverflow
How to force a line break in a loooooong word in a DIV?	stackoverflow
CSS: How to set the table column width constant regardless of the amount of text in its cells?	stackoverflow

Salut, je suis Ben, le fondateur de moonbooks.org. Je travaille en tant que chercheur spécialisé dans la télédétection par satellite de la Terre, en me concentrant particulièrement sur la détection des incendies à l'aide des capteurs VIIRS et ABI. Mes domaines d'expertise incluent Python, l'apprentissage automatique et la science ouverte. N'hésitez pas à me contacter si vous remarquez des erreurs sur le site. Je m'efforce constamment de l'améliorer. Merci !

Fixer la taille des colonnes d'un tableau avec un texte long en HTML

Recherches associées

Benjamin

Skills