web-dev-qa-db-fra.com

Utilisation de CSS td width absolute, position

S'il vous plaît voir ceci 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>

Aussi, quels sont les effets de la position: fixes, absolus, etc., sur les largeurs td, le cas échéant? Je cherche une raison plus qu'un correctif. J'espère comprendre comment cela fonctionne.

td width is not 300px as desired

htmlcsshtml-table
103
Jake

Ce n'est peut-être pas ce que vous voulez entendre, mais display: table-cell ne respecte pas la largeur et sera réduit en fonction de la largeur de la table entière. Vous pouvez facilement contourner ce problème simplement en ayant un élément display: block dans la cellule même de la table, dont vous indiquez 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: fixed ou absolu, car la position des cellules est toutes statiques par rapport à la table.

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

EDIT: Je ne peux pas accepter le crédit, mais comme le disent les commentaires, vous pouvez simplement utiliser min-width au lieu de width sur la cellule du tableau.

143
Explosion Pills

Vous feriez mieux d'utiliser table-layout: fixed

Auto est la valeur par défaut. Avec des tables volumineuses, un léger décalage du côté client peut survenir lorsque le navigateur effectue une itération pour vérifier que toutes les tailles sont correctes.

Fixe est bien meilleur et rend plus rapide à la page. La structure de la table dépend de la largeur totale de la table 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 recouvrent leur contenu. Nous pouvons résoudre ce problème avec un peu plus de CSS (tout ce que j'ai à 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

28
Hugo Yates

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

Si vous voulez forcer l'ajustement des colonnes, essayez le réglage:

body {min-width:4150px;}

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

11
Matthew Brown

La raison en est, parce que vous n'avez pas spécifié la largeur de la table, et que tout votre lot de td déborde.

Ceci par exemple , j'ai donné à la table une largeur de 5000 pixels, ce qui, à mon avis, conviendrait à 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 votre TD dépasse de loin la largeur de la table par défaut. Ce que vous pouvez voir, si vous extrayez 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

8
He Hui

Essayez ceci ça marche.

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

Essayez d'utiliser

table {
  table-layout: auto;
}

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

5
sambrmg

Utilisez la propriété table-layout et la valeur "fixed" de votre table.

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

Après avoir défini toute la largeur de la table, vous pouvez maintenant définir la largeur en% du td.

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

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

4
Cyan Baltazar

Ma solution folle.)

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

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

2
Dally S

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

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Voici un jsfiddle .

2
simhumileco

Vous pouvez aussi utiliser:

.rhead {
    width:300px;
}

mais cela ne concerne que certains navigateurs, si je me souviens bien, IE8 ne le permet pas. Globalement, il est plus prudent de simplement mettre l'attribut width="" dans le <td> lui-même.

1
michaelcurry