Tableau HTML largeurs de colonne: la combinaison de fixe et de largeurs variables

J'ai fait un tableau en tant que tel:

<table style="width:1000px;">
  <tr>
    <td>aaa</td>
    <td id="space"></td>
    <td class="fixed-width">bbb</td>
    <td class="fixed-width">ccc</td>
  </tr>
</table>

Comment je ferais le CSS de sorte que les colonnes b et c ont une largeur fixe, la colonne ne prend plus d'espace que nécessaire, et l'espace de la colonne à développer pour remplir le reste de la table?

OriginalL'auteur whotemp | 2011-11-19

  1. 4

    Je ne suis pas un gourou CSS, mais ça n'a pas l'impression qu'il n'y aurait aucun moyen de le faire. Cela semble fonctionner dans Firefox et IE7. Je n'ai pas vérifié les autres navigateurs.

    La première shrink-to-fit <col> set (à l'aide de CSS) à 0 largeur, de sorte qu'il se rétrécit à ajuster le contenu.

    Le second espace <col> set (à l'aide de CSS) à une largeur plus grande que dans la table.

    La largeur des deux dernières largeur fixe <col>s n'est pas sur le <col>. Au lieu de cela, il est configuré sur le <td> de style. Cela force la largeur de la colonne.

    <!DOCTYPE html>
<html>
    <head>
        <title>cols</title>
        <style type="text/css">
            td.fixed-width {
                width: 100px;
                background-color:aqua
            }
            td.min-width {background-color:aqua}
            td.space {border: thick blue solid}
        </style>
    </head>
    <body style="width:1100px; font-family:sans-serif">
        <table style="width:1000px;">
            <col style="width:0"/>
            <col style="width:1000px"/>
            <col span="2" />
            <tr>
                <td class="min-width">aaa</td>
                <td class="space"></td>
                <td class="fixed-width">bbb</td>
                <td class="fixed-width">ccc</td>
            </tr>
            <tr>
                <td class="min-width">aaa asdfasdf asdfsad</td>
                <td class="space"></td>
                <td class="fixed-width">bbb fasdas</td>
                <td class="fixed-width">ccc vdafgf asdf adfa a af</td>
            </tr>
        </table>
    </body>
</html>
    Cela a fonctionné! Très bien, merci.
    vous êtes les bienvenus. J'ai lu attentivement les CSS 2.1 spec pour voir si je pouvais trouver quelque chose qui a besoin de ce comportement, et est venu vide. Ce que j' pense ceci dit, c'est que, dans le cas d'une pénurie d'espace horizontal dans une table, il y a une plus grande priorité à donner les cellules dans une colonne de ce qu'ils individuel demande d'exiger, que ce soit pour assurer la <col> largeur.

    OriginalL'auteur Ed Staub