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

Active 16 mai 2015    /    Viewed 8209    /    Comments 0    /    Edit


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

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


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!