¿Por qué CSS td width no funciona?

Es mejor usar table-layout: fixed

Auto es el valor predeterminado y con tablas grandes puede causar un poco de retraso del lado del cliente, ya que el navegador itera a través de él para verificar que todos los tamaños se ajusten.

Fijo es mucho mejor y hace más rápido a la página. La estructura de la tabla depende del ancho total de las tablas y del ancho de cada una de las columnas.

Aquí se aplica al ejemplo original: JSFIDDLE , notará que el resto las columnas se aplastan y se superponen a su contenido. Podemos arreglar eso con un poco más de CSS (todo lo que he tenido que hacer es agregar una clase al primer TR):

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

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

    td.rhead {
        width: 300px
    }

Visto en acción aquí: JSFIDDLE

La razón por la que no funciona en el enlace que proporcionó es porque está tratando de mostrar una columna de 300px MÁS 52 columnas que abarcan 7 columnas cada una. Reducir el número de columnas y funciona. No caben tantos en la pantalla.

Si desea forzar que las columnas se ajusten, intente establecer:

body {min-width:4150px;}

Ver mi jsfiddle: http://jsfiddle.net/Mkq8L/6 / @mike Todavía no puedo comentar.

La razón, es, porque no se especifica el ancho de la tabla, y su montón de td son desbordantes.

Esto por ejemplo , le he dado a la tabla un ancho de 5000px, que pensé que se ajustaría a sus requisitos.

table{
    width:5000px;
}

Es exactamente el mismo código que proporcionó, que simplemente agregué en el ancho de la tabla.

Creo que lo que está sucediendo, es porque sus TD's están mucho más allá del ancho de tabla predeterminado. Que usted podría ver, si usted saca cerca de 45 de su td's en cada tr, (es decir, el código que proporcionó en su pregunta, no jsfiddle) funciona exactamente bien

Intenta que esto funcione.

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

Intenta usar

table {
  table-layout: auto;
}

Si usa Bootstrap, la clase table tiene table-layout: fixed; por defecto.

Mi solución loca.)

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

Use la propiedad table-layout y el valor "fixed" en su tabla.

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

Después de configurar todo el ancho de la tabla, ahora puede configurar el ancho en % de los td.

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

Puede obtener más información en este enlace: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Si el ancho de la tabla es, por ejemplo, 100%, intente usar un ancho porcentual en td como 20%.

Envolver el contenido de la primera celda en div, por ejemplo, así:

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Aquí hay un jsfiddle.

También puedes usar:

.rhead {
    width:300px;
}

Pero esto solo con con algunos navegadores, si no recuerdo mal IE8 no permite esto. Sobre todo, es más seguro poner el atributo width="" en el propio <td>.