Utilisation de CSS td width absolute, position

Question

Veuillez 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>

Par ailleurs, quels sont les effets de position:fixed, absolute, etc. sur la largeur des td, le cas échéant ? Je cherche une raison plus qu'une solution. J'espère comprendre comment cela fonctionne.

Answer 1

Essayez d'utiliser

table {
  table-layout: auto;
}

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

Answer 2

Ma solution folle).

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

Answer 3

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

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

Après avoir défini la largeur totale du tableau, vous pouvez maintenant définir la largeur en % des td's.

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

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

Answer 4

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

Answer 5

Enveloppez le contenu de la première cellule dans le div, par exemple comme ceci :

HTML :

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

CSS :

.rhead {
  width: 300px;
}

Voici un jsfiddle .