12
votes

Colspan sur la cellule d'une rangée semble empêcher de définir la largeur TD dans toutes les autres lignes. Pourquoi?

Je veux créer une table qui ressemble à ceci: xxx

mais ce que je reçois est ceci: xxx

le 'x 'est en fait une image an a une largeur fixe. Je veux forcer la première cellule à être aussi large que l'image.

Voici un échantillon: xxx

Il semble que la ligne contenant le TD avec colspan = 3 provoque la TD dans les autres rangées d'ignorer la Attribut de largeur (j'ai également essayé d'utiliser la largeur de style: 20px)

Le rendu est correct en FF8. Toutes idées Comment puis-je obtenir, à savoir rendre la table dans la façon dont je veux?

html html-table

4 commentaires

Étrange, ce que vous faites semble bien. J'ai copié votre code HTML et cela fonctionne bien pour moi. Avez-vous essayé d'utiliser Firebug pour vérifier si le a peut-être un style que vous ne connaissez pas?

@Lex - tu as raison. Je viens de la copier et ça va bien dans FF. Suit toujours dans IE cependant!

La largeur de la table globale et la largeur des deux autres colonnes doivent-elles être dynamiques ou peuvent-elles être réparées?

@James - J'aimerais que la première cellule soit corrigée (c'est une image) et les autres cellules à partager le reste. La largeur de la table doit également être dynamique

4 Réponses :

0
votes

Ie traite toujours la largeur des cellules de table comme min-largeur, au moins jusqu'à la version 8 (ne sait pas environ 9).

Le seul moyen que j'ai trouvé autour de ceci est de spécifier des largeurs explicites sur toutes les cellules du tableau ou d'utiliser JavaScript pour définir la largeur après le chargement (mais avant d'afficher).

0 commentaires

-1
votes

Je suggérerais de donner à ces cellules une classe, puis de style avec xxx

1 commentaires

Il suffit de lire que vous avez essayé cela ... étrange, ça marche pour moi. ma seule autre suggestion serait de définir la largeur globale de la table

22
votes

J'avais oublié que la table a le style 'table-mise en page: fixe' et cela causait la difficulté. Lorsque ce style est défini, les largeurs des cellules de la première ligne sont appliquées à toutes les lignes suivantes. Au fur et à mesure que la première ligne contenait un colspan, je suppose que c'est-à-dire que c'est confus (FF le gère bien).

Toute façon que ce soit aussi flexible que je ne le voulais, mais cela a fonctionné pour moi. P>

<html>
  <body>
  <div style="width:350px; border:blue 1px solid">
    <table border="0" style="font-family:Arial,Helvetica;font-size:10pt;table-layout:fixed;">
      <tr>
        <td style="width:17px;"/>
        <td style="width:20px;"/>
        <td style="width:180px;"/>
        <td style="width:130px;"/>
      </tr>
      <tr>
        <td colspan="4" style="width:100%;text-align:center;font-eight:bold;background-color:#eef;">09 January 2012</td>
      </tr>
      <tr title="09 January 2012">
        <td align="center" valign="middle" colspan="1" style="width:17px;height:1.1em;"><img src="../../../../_layouts/images/WebParts2010/AWT3_Klein.png" style="border-style:None;border-width:0px;height:1.1em;width:1.1em;" /></td>
        <td align="left" valign="top" colspan="1" style="width:20px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">LO</td>
        <td align="left" valign="top" colspan="1" style="width:180px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Customer Name Ltd.</td>
        <td align="left" valign="top" colspan="1" style="width:120px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Reason for visiting today</td>
      </tr>
    </table>
  </div>
</body>
</html>

1 commentaires

Dieu merci, j'ai lu ceci .. Je n'aurais jamais deviné ça. J'ai figuré fixé signifie "écouter mon style!"

7
votes

Comme trouvé dans Cette réponse Vous pouvez définir des attributs de la table entière via Colgroup code> et col code>. De cette façon, vous êtes capable de définir des attributs individuels même pour les cellules (invisibles simples) à l'intérieur du colspan dans la première rangée.

Dans votre exemple, ce serait: P>

<table>
  <colgroup>
    <col width="20" />
    <col />
    <col />
  </colgroup>
  <tbody>
    <tr>
      <td colspan="3">January 12th 2011 this here is just for padding to make table wider</td>
    </tr>
    <tr>
      <td> x </td>
      <td>First item</td>
      <td>Second item</td>
    </tr>
  </tbody>
</table>

1 commentaires

J'ai eu le même problème. C'était la seule chose qui la résolvait pour moi.