web-dev-qa-db-fra.com

Largeurs des cellules du tableau - largeur de fixation, habillage / tronquage de mots longs

J'ai un tableau contenant des cellules avec du texte de différentes longueurs. Il est essentiel que toutes les cellules du tableau soient de la même largeur. Si cela signifie tronquer des mots longs ou forcer une pause dans les mots longs, c'est OK.

Je ne peux pas trouver de moyen de faire fonctionner cela.

Il s'agit d'une application cliente interne qui doit donc fonctionner dans IE6 et IE7 uniquement.

Un exemple de page est ci-dessous. La cellule contenant onereallylongword est la cellule incriminée.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; }
    </style>
</head>
<body>
    <table border="2">
        <tr>
            <td>Word</td>
            <td>two words</td>
            <td>onereallylongword</td>
        </tr>
    </table>
</body>
</html>
htmlcssuser-interfacehtml-table
37
Richard Everett

Stack Overflow a résolu un problème similaire avec de longues lignes de code en utilisant un DIV et en ayant overflow-x:auto. CSS ne peut pas casser les mots pour vous.

17
Diodeus - James MacFarlane

Tant que vous fixez la largeur de la table elle-même et définissez la propriété table-layout, c'est assez simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; overflow: hidden; }
        table { width : 90px; table-layout: fixed; }
    </style>
</head>
<body>

    <table border="2">
        <tr>
            <td>Word</td>
            <td>two words</td>
            <td>onereallylongword</td>

        </tr>
    </table>
</body>
</html>

J'ai testé cela dans IE6 et 7 et cela semble bien fonctionner.

35
inferis

Si vous voulez que le texte long soit correctement enveloppé dans de nouvelles lignes, alors dans votre appel d'ID de table, utilisez une propriété css table-layout:fixed; sinon css ne peut tout simplement pas casser le long texte dans de nouvelles lignes.

20
Katie

Essaye ça:

text-overflow: Ellipsis; 
overflow: hidden; 
white-space:nowrap;
10
Anupam

Je me rends compte que vous aviez besoin d'une solution pour IE6/7, mais je ne fais que la proposer à quelqu'un d'autre.

Si vous ne pouvez pas utiliser table-layout: fixed et vous ne vous souciez pas de IE <9 cela fonctionne pour tous les navigateurs.

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}
2
shrimpwagon
<style type="text/css">
td { Word-wrap: break-Word;max-width:50px; }            
</style>
2
Mukund