largeurs td, 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 que le tdavec le widthde 200 continue de changer de largeur. Je n'ai aucune idée de quoi il parle. Est-ce que quelqu'un sait pourquoi il ou elle voit le changement de largeur sur le td?

Ça devrait être:

<td width="200">

ou

<td style="width: 200px">

Notez que si votre cellule contient du contenu qui ne rentre pas dans le 200px (comme somelongwordwithoutanyspaces), la cellule sera néanmoins étirée, sauf si votre CSS contient table-layout: fixedpour le tableau.

ÉDITER

Comme l'a noté kristina childs dans sa réponse, vous devriez éviter à la fois l' widthattribut et l'utilisation de CSS en ligne (avec l' styleattribut). C'est une bonne pratique de séparer le plus possible le style et la structure.

La largeur et / ou la hauteur des tables ne sont plus standard; comme Ianzz le 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 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;
}

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

Cela forcera la largeur stylisée <td>. Si le texte le remplit, il chevauchera l'autre <td>texte. Essayez donc d'utiliser des requêtes multimédias.

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

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

table-layout: fixed;
width: 150px;

150px ou la largeur souhaitée.

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

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

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

Essayez d'utiliser

word-wrap: break-word;

espère cette aide

essaye ça:

word-break: break-all;

j'utilise

<td nowrap="nowrap">

pour éviter l'enroulement Référence: https://www.w3schools.com/tags/att_td_nowrap.asp

Utilisation

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

Cela forcera la table à définir une largeur de 100%, puis utilisez ce code

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

(l'ID de la table est dataTable et a 3 colonnes) pour spécifier la longueur de chaque cellule

Notez que l'ajustement de la largeur d'une colonne dans la tête 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 remplaçait directement la largeur sur table> tr> td.

J'ai essayé avec de nombreuses solutions mais cela n'a pas fonctionné pour moi, alors j'ai essayé flex avec la table et cela a bien fonctionné pour moi avec toutes les fonctionnalités de table telles que la réduction des bordures et ainsi de suite, seul le changement est la propriété d'affichage

C'était mon exigence HTML

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

Mon CSS

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

Ce problème est assez facilement résolu en utilisant min-widthet max-widthdans une règle css.

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

Cela forcera la première colonne à avoir une largeur de 80 pixels. Habituellement, je n'utilise que max-width sans min-width pour régner dans le texte qui est très parfois trop long à partir de la création d'un tableau qui a une colonne super large qui est principalement vide. La question du PO portait cependant sur la définition d'une largeur fixe, d'où les deux règles ensemble. Sur de nombreux navigateurswidth:80px; CSS est ignoré pour les colonnes de table. La définition de la largeur dans le HTML fonctionne, mais ce n'est pas la façon dont vous devriez faire les choses.

Je recommanderais d'utiliser des règles de largeur minimale et maximale, et de ne pas les définir de la même manière, mais plutôt de définir une plage. De cette façon, le tableau peut faire son travail, mais vous pouvez lui donner des conseils sur ce qu'il faut faire avec un contenu trop long.

Si je veux empêcher le texte de s'habiller et d'augmenter la hauteur d'une ligne - tout en permettant à un utilisateur de voir le texte intégral, j'utilise white-space: nowrap;sur la règle principale, puis j'applique une règle de survol qui supprime les règles de largeur et de nowrap afin que l'utilisateur puisse voir le contenu complet lorsqu'il passe la souris dessus. Quelque chose comme ça:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

Cela dépend exactement de ce que vous essayez d'accomplir. J'espère que ça aidera quelqu'un. PS En passant, pour iOS, il existe un correctif pour le survol qui ne fonctionne pas - voir CSS Hover ne fonctionne pas sur iOS Safari et Chrome