web-dev-qa-db-fra.com

td largeurs, ne fonctionne pas?

J'ai donc ce code ici:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

avec le CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Cela fonctionne bien sur mon navigateur et je l’ai testé dans tous les navigateurs, Mac et PC, mais quelqu'un se plaint du fait que la td avec le width de 200 ne cesse de changer de largeur. Je ne sais pas de quoi il parle. Est-ce que quelqu'un sait pourquoi il ou elle voit la largeur changer sur le td?

htmlcsshtml-tablewidth
72
user979331

CA devrait etre:

<td width="200">

ou

<td style="width: 200px">

Notez que si votre cellule contient du contenu qui ne rentre pas dans 200px (comme somelongwordwithoutanyspaces), la cellule s’étendra néanmoins, à moins que votre CSS ne contienne table-layout: fixed pour le tableau.

EDIT

Comme Kristina Childs l'a noté dans sa réponse, vous devez éviter à la fois l'attribut width et l'utilisation de CSS en ligne (avec l'attribut style). C'est une bonne pratique de séparer le plus possible le style et la structure.

103
bfavaretto

La largeur et/ou la hauteur des tables ne sont plus la norme; comme le dit Ianzz, ils sont obsolètes. Au lieu de cela, la meilleure façon de le faire est d’avoir un élément de bloc à l’intérieur de votre cellule de tableau qui maintiendra la cellule ouverte à la taille souhaitée:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}
24
kristina childs
 <table style="table-layout:fixed;">

Cela forcera la largeur stylisée <td>. Si le texte le dépasse, il chevauchera l'autre texte <td>. Donc, essayez d'utiliser des requêtes de médias.

16
mateostabio

Vous ne pouvez pas spécifier d'unités dans les attributs width/height d'une table; ceux-ci sont toujours en pixels, mais vous ne devriez pas les utiliser du tout, car ils sont obsolètes.

7
lanzz

Vous pouvez essayer le "tableau-layout: fixed;" à ta table

table-layout: fixed;
width: 150px;

150px ou votre largeur désirée.

Référence: https://css-tricks.com/fixing-tables-long-strings/

5
Cyan Baltazar

Vous pouvez utiliser dans <td> balise css: display:inline-block

J'aime: <td style="display:inline-block">

5
Siddharth Shukla

essayez d'utiliser

Word-wrap: break-Word;

espérons que cette aide

3
Med7at

essaye ça:

Word-break: break-all;
1
Masoud HB

Notez que le réglage de la largeur d’une colonne dans l’épaisseur affectera l’ensemble du tableau.

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>[email protected]</td>
    </tr>
</table>

Dans mon cas, la largeur sur le thead> tr était supérieure à la largeur sur le tableau> tr> td directement.

0
Nick Woodhams