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


Tableau de départ:

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

<!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

Image

of