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

Développeur à mes heures perdues, je m’intéresse à la télédétection terrestre et à la détection des incendies par satellite. Passionné par Python, le machine learning et la science ouverte.

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

Recherches associées

Benjamin

Skills