Utilisation de CSS td width absolu, position

S'il vous plaît voir ce JSFIDDLE

td.rhead { width: 300px; }

Pourquoi la largeur CSS ne fonctionne-t-elle pas?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

En outre, quels sont les effets de la position: fixe, absolue, etc. sur les largeurs de td, le cas échéant? Je cherche une raison plus qu'une solution. J'espère comprendre comment cela fonctionne.

Ce n'est peut-être pas ce que vous voulez entendre, mais display: table-cellne respecte pas la largeur et sera réduit en fonction de la largeur de l'ensemble du tableau. Vous pouvez contourner cela facilement simplement en ayant un display: blockélément à l'intérieur de la cellule du tableau lui-même dont vous spécifiez la largeur, par exemple

<td><div style="width: 300px;">wide</div></td>

Cela ne devrait pas faire beaucoup de différence si le <table>lui-même est position: fixedou absolu, car la position des cellules est toutes statique par rapport au tableau.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

EDIT: Je ne peux pas prendre de crédit, mais comme le disent les commentaires, vous pouvez simplement utiliser à la min-widthplace de widthla cellule du tableau.

Vous feriez mieux d'utiliser table-layout: fixed

Auto est la valeur par défaut et avec de grandes tables, cela peut entraîner un léger décalage côté client lorsque le navigateur l'itère pour vérifier que toutes les tailles conviennent.

Fixed est bien meilleur et s'affiche plus rapidement sur la page. La structure du tableau dépend de la largeur hors tout des tableaux et de la largeur de chacune des colonnes.

Ici, il est appliqué à l'exemple d'origine: JSFIDDLE , vous remarquerez que les colonnes restantes sont écrasées et chevauchent leur contenu. Nous pouvons corriger cela avec un peu plus de CSS (tout ce que j'ai eu à faire est d'ajouter une classe au premier TR):

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

Vu en action ici: JSFIDDLE

La raison pour laquelle cela ne fonctionne pas dans le lien que vous avez fourni est que vous essayez d'afficher une colonne de 300 pixels PLUS 52 colonnes de 7 colonnes chacune. Réduisez le nombre de colonnes et cela fonctionne. Vous ne pouvez pas en mettre autant à l'écran.

Si vous voulez forcer les colonnes à s'adapter, essayez de régler:

body {min-width:4150px;}

voir mon jsfiddle: http://jsfiddle.net/Mkq8L/6/ @mike Je ne peux pas encore commenter.

La raison est que vous n'avez pas spécifié la largeur du tableau et que tout votre tas de td déborde.

Ceci par exemple , j'ai donné au tableau une largeur de 5000px, ce qui, selon moi, répondrait à vos besoins.

table{
    width:5000px;
}

C'est exactement le même code que vous avez fourni, que j'ai simplement ajouté dans la largeur du tableau.

Je crois que ce qui se passe, c'est que vos TD dépassent largement la largeur de table par défaut. Ce que vous pourriez voir, si vous retirez environ 45 de vos td dans chaque tr, (c'est-à-dire le code que vous avez fourni dans votre question, pas jsfiddle) cela fonctionne parfaitement

Essayez ceci, cela fonctionne.

<table>
<thead>
<tr>
<td width="300">need 300px</td>

Essayez d'utiliser

table {
  table-layout: auto;
}

Si vous utilisez Bootstrap, la classe tablea table-layout: fixed;par défaut.

Utilisez la propriété de mise en page du tableau et la valeur «fixe» sur votre table.

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

Après avoir configuré toute la largeur du tableau, vous pouvez maintenant configurer la largeur en% des td.

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

Vous pouvez en savoir plus sur ce lien: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Ma solution folle.)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

Si la largeur du tableau est par exemple de 100%, essayez d'utiliser un pourcentage de largeur sur td tel que 20%.

Enveloppez le contenu de la première cellule en div, par exemple comme ça:

HTML:

<td><div class="rhead">a little space</div></td>

CSS:

.rhead {
  width: 300px;
}

Voici un jsfiddle .

Vous pouvez aussi utiliser:

.rhead {
    width:300px;
}

mais ce ne sera qu'avec certains navigateurs, si je me souviens bien, IE8 ne le permet pas. Dans l'ensemble, il est plus sûr de simplement mettre l' width=""attribut en <td>lui - même.