td largeur, pas de travail?

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;
}

Il fonctionne très bien sur mon navigateur et je l'ai testé dans tous les navigateurs mac et PC, mais quelqu'un se plaint que le td avec le width de 200 conserve modification de la largeur. Je n'ai aucune idée de quoi il parle. Personne ne sait pourquoi il ou elle est de voir la modification de la largeur sur la td?

Alors, comment pouvons-nous aider quand nous avons encore moins d'idée de ce que l'objet de la plainte? Nous ne pouvons même pas de test de la page réelle, et nous n'avons aucune information à propos de quelqu'un et de son environnement de navigation.

InformationsquelleAutor user979331 | 2012-06-18

105

Il devrait être:
```
<td width="200">
```
ou
```
<td style="width: 200px">
```
Noter que si la cellule contient du contenu qui ne rentre pas dans le 200px (comme somelongwordwithoutanyspaces), la cellule va s'étirer néanmoins, à moins que votre CSS contient table-layout: fixed pour la table.

MODIFIER

Comme kristina childs a noté sur sa réponse, vous devriez éviter à la fois la width attribut et à l'aide de CSS (avec le style attribut). C'est une bonne pratique pour séparer le style et la structure autant que possible.
- Grâce bfavaretto...essayer maintenant
- si la table de <table style="table-layout:fixed;">
- Oui, c'est ça. Mais évitez d'utiliser du css si possible.
- css est une mauvaise idée, sauf si vous avez vraiment besoin dans un seul endroit. aussi, td largeur a été dépréciés pour un certain temps. voir la réponse ci-dessous
- Je suis d'accord. J'ai utilisé du css sur mon exemple, si je n'aurais pas besoin de se scinder en deux blocs de code HTML et CSS. Ajout d'un commentaire ci-dessus de raconter l'OP, pour éviter les CSS. À propos de l'attribut width, techniquement, il n'est pas obsolète (depuis la spec HTML5 est encore un projet de travail), mais vous avez raison, il devrait être évitée. Je vais modifier ma réponse avec une note à ce sujet.
- La procédure formelle d'erreur de syntaxe dans le code de la question, à cet égard, n'a pas d'incidence sur la fonctionnalité de n'importe quel navigateur que je le sais. Réglage table-layout: fixed est utile si vous souhaitez rigide de mise en page, mais les navigateurs peuvent toujours s'écarter de la largeur définie.
- Oui, width="200" œuvres et a toujours travaillé dans tous les navigateurs, et je ne vois pas qu'ils déposer le support de sitôt (mais c'est une mauvaise pratique quand même). Et vous en avez à me poser des questions sur table-layout:fixed: quand peut les navigateurs de s'écarter de la largeur définie? Je vois toujours la totalité de la table de débordement, mais chaque cellule semble avoir égard à la largeur définie.
- L'homme que je déteste quand mon td largeurs de se déprécier. Il est presque aussi mauvais que lors de mes investissements ne.
- ce qu'elle a dit?
- C'est une blague à propos de la façon dont "l'amortir" et "railler" ne signifie pas la même chose.
InformationsquelleAutor bfavaretto

Largeur et/ou hauteur dans les tableaux ne sont pas standard plus; comme Ianzz dit, 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 va contenir la cellule ouvrir à la taille désiré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;
}

Malheureusement, email de la technologie est de nombreuses années de retard sur la spécification HTML, et dans ce cas, les tables et les css sont malheureusement inévitables.
Personne n'a parlé des e-mails html, c'était pour l'environnement de bureau de base de la navigation web. Mais oui, pour les e-mails des tables et css sont la seule façon de les construire. Merci, Microsoft...
J', seuls les e-mail parce que c'est ce qui m'a amené ici; j'ai eu ce même problème avec le courrier électronique.

InformationsquelleAutor kristina childs

18
```
 <table style="table-layout:fixed;">
```
Cela va forcer le style de la largeur de <td>. Si le texte est trop-pleins, il va recouvrir l'autre <td> texte. Donc essayez d'utiliser les media queries.
- Sur mon cas d'utilisation, c'est aussi important que le bfavaretto réponse
- Dans mon cas (Firefox 70.0), table-layout:fixed attribué fixe les largeurs de colonnes, de sorte que je ne peux pas changer width plus (avec jquery).
InformationsquelleAutor mateostabio
7

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

InformationsquelleAutor lanzz
6

Vous pouvez essayer de la "table-layout: fixed;" à votre table
```
table-layout: fixed;
width: 150px;
```
150px ou votre largeur désirée.

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

InformationsquelleAutor Cyan Baltazar
5

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

Comme: <td style="display:inline-block">

InformationsquelleAutor Siddharth Shukla
3

essayez d'utiliser
```
word-wrap: break-word;
```
espérons que cette aide

InformationsquelleAutor Med7at
1

essayez ceci:
```
word-break: break-all;
```
InformationsquelleAutor Masoud HB

Noter que le réglage de la largeur d'une colonne dans le thead affectera l'ensemble de la table

<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 primordial de la largeur sur la table > tr > td directement.

InformationsquelleAutor Nick Woodhams

0

- Je utiliser

HTML:
```
<td nowrap="nowrap">
```
pour éviter wrap
Référence: https://www.w3schools.com/tags/att_td_nowrap.asp
- "L'attribut nowrap de <td> n'est pas pris en charge dans HTML5. Utiliser les CSS à la place."
InformationsquelleAutor user1760527

Utilisation

<table style="table-layout:fixed;">

Il sera force de table à jeu à 100% de largeur.Ensuite, utilisez ce code

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(tableau id est dataTable et d'avoir la colonne 3)
pour spécifier la longueur de chaque cellule

InformationsquelleAutor Amrit Anand

Vous devez vous connecter pour publier un commentaire.