Usando CSS td largura absoluta, posição

Por favor, veja este JSFIDDLE

td.rhead { width: 300px; }

Por que a largura do CSS não funciona?

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

Além disso, quais são os efeitos da posição: fixo, absoluto, etc., têm nas larguras td, se houver? Estou procurando mais uma razão do que uma solução. Espero entender como funciona.

Isso pode não ser o que você deseja ouvir, mas display: table-cellnão respeita a largura e será reduzido com base na largura de toda a mesa. Você pode contornar isso facilmente apenas tendo um display: blockelemento dentro da própria célula da tabela cuja largura você especifica, por exemplo

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

Isso não deve fazer muita diferença se o <table>próprio for position: fixedou absoluto, porque a posição das células são todas estáticas em relação à tabela.

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

EDIT: Eu não posso levar o crédito, mas como dizem os comentários, você pode simplesmente usar em min-widthvez de widthna célula da tabela.

Você está melhor usando table-layout: fixed

Auto é o valor padrão e com tabelas grandes pode causar um pouco de atraso no lado do cliente, pois o navegador itera por ele para verificar se todos os tamanhos se encaixam.

Fixed é muito melhor e renderiza mais rápido na página. A estrutura da tabela depende da largura geral da tabela e da largura de cada uma das colunas.

Aqui ele é aplicado ao exemplo original: JSFIDDLE , você notará que as colunas restantes são comprimidas e sobrepondo seu conteúdo. Podemos consertar isso com um pouco mais de CSS (tudo que tive que fazer foi adicionar uma classe ao primeiro TR):

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

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

    td.rhead {
        width: 300px
    }

Visto em ação aqui: JSFIDDLE

O motivo pelo qual isso não funciona no link fornecido é porque você está tentando exibir uma coluna de 300px MAIS 52 colunas com 7 colunas cada. Diminua o número de colunas e funciona. Você não pode caber tantos na tela.

Se você deseja forçar o ajuste das colunas, tente configurar:

body {min-width:4150px;}

veja meu jsfiddle: http://jsfiddle.net/Mkq8L/6/ @mike Não posso comentar ainda.

A razão é porque você não especificou a largura da mesa e todo o seu conjunto de td's está transbordando.

Por exemplo , dei à mesa uma largura de 5.000 px, que achei que se encaixaria nos seus requisitos.

table{
    width:5000px;
}

É exatamente o mesmo código que você forneceu, que apenas adicionei na largura da tabela.

Eu acredito que o que está acontecendo é porque seus TDs ultrapassaram a largura padrão da mesa. O que você pode ver, se retirar cerca de 45 de seus td's em cada tr (ou seja, o código que você forneceu em sua pergunta, não o jsfiddle) funciona perfeitamente bem

Tente fazer isso funcionar.

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

Tente usar

table {
  table-layout: auto;
}

Se você usar Bootstrap, classe tabletem table-layout: fixed;por padrão.

Use a propriedade table-layout e o valor "fixo" em sua mesa.

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

Após configurar toda a largura da mesa, agora você pode configurar a largura em% dos td's.

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

Você pode aprender mais sobre em neste link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Minha solução maluca.)

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

Se a largura da tabela for, por exemplo, 100%, tente usar uma largura de porcentagem em td, como 20%.

Envolva o conteúdo da primeira célula em div, por exemplo:

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Aqui está um jsfiddle .

Você também pode usar:

.rhead {
    width:300px;
}

mas isso só acontecerá com alguns navegadores, se bem me lembro o IE8 não permite isso. Acima de tudo, é mais seguro apenas colocar o width=""atributo no <td>próprio.