Tabla HTML - tabla de 100% de ancho, combinación de ancho fijo y columnas de fluido UNIFORM

Question

Estoy tratando de crear un calendario personalizado en HTML y Javascript donde pueda arrastrar y soltar tareas de un día para otro. Me gustaría tener la primera columna y las dos últimas columnas como ancho fijo y tener las columnas restantes (de lunes a viernes) fluidas para que la tabla siempre llene el 100% de su matriz.

El problema que estoy teniendo es que las TD fluidas se dimensionan automáticamente en función de la cantidad de contenido que contienen, lo que significa que cuando arrastro una tarea de un día a otro el ancho de las columnas cambia de tamaño. Me gustaría tener de lunes a viernes el mismo tamaño independientemente del contenido y sin configurar el desbordamiento de texto: oculto; (como las tareas siempre deben estar visibles)

es decir, quiero que las columnas grises tengan un ancho fijo y las columnas rojas fluidas pero uniformes entre sí, independientemente del contenido que contengan.

Editar: estoy usando jQuery para la funcionalidad de arrastrar y soltar lo que una solución JavaScript también estaría bien (aunque no es preferible).

JSFiddle Live example

HTML:

<table> 
    <tr> 
    <th class="row_header">Row Header</th> 
    <th class="fluid">Mon</th> 
    <th class="fluid">Tue</th> 
    <th class="fluid">Wed</th> 
    <th class="fluid">Thurs</th> 
    <th class="fluid">Fri</th> 
    <th class="weekend">Sat</th> 
    <th class="weekend">Sun</th> 
    </tr> 
    <tr> 
    <td>Before Lunch</td> 
    <td>This col will be wider than the others because it has lots of content...</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>But I would really like them to always be the same size!</td> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

CSS:

table { 
     width: 100%; 
    }  

    td, th { 
     border:1px solid black; 
    } 

    th { 
     font-weight:bold;    
     background:red; 
    } 

    .row_header { 
     width:50px; 
     background:#ccc; 
    } 

    .weekend { 
     width:100px; 
     background:#ccc; 
    } 

    .fluid { 
     ??? 
    } 

Answer 1

Usando jQuery (probablemente podría hacerse con JS regulares también, pero yo prefiero que para este tipo de puestos de trabajo):

(Nota: Me di la mesa de una identificación por lo que será más fácil para seleccionar , se puede hacer sin que con un poco de bricolaje)

$(function() { 
     var $my_table = $("#my_table") 
      ,current_width = $my_table.width() 
      ,fluid_columns = $("table .fluid") 
      ,spread_width = (current_width - 150)/fluid_columns.length; 

     fluid_columns.width(spread_width); 

     $(window).on("resize", function() { 
      current_width = $my_table.width(); 
      spread_width = (current_width - 150)/fluid_columns.length; 
      fluid_columns.width(spread_width); 
     }) 
    }); 

Answer 2

Podría usted hacer:

.fluid { 
    width:10%; 
} 

Answer 3

¿Qué tal esto utilizando sólo CSS?

http://jsfiddle.net/T6YNK/16/

Answer 4

Danny,

creo que esto es lo que busca.

violín aquí http://jsfiddle.net/T6YNK/22/

A cuadros en Chrome.

Código

   <table> 
     <tr> 
     <th class="row_header">Row Header</th> 
     <th class="fluid">Mon</th> 
     <th class="fluid">Tue</th> 
     <th class="fluid">Wed</th> 
     <th class="fluid">Thurs</th> 
     <th class="fluid">Fri</th> 
     <th class="weekend">Sat</th> 
     <th class="weekend">Sun</th> 
     </tr> 
     <tr> 
     <td>Before Lunch</td> 
     <td>This col will be wider than the others because it has lots of content...</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>But I would really like them to always be the same size!</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
    </table> 

    <style type="text/css"> 

     table { 
      width: 100%; 
     }   

     td, th { 
      border:1px solid black; 
     } 

     th { 
      font-weight:bold;    
      background:red; 
     } 

     .row_header { 
      width:50px; 
      background:#ccc; 
     } 

     .weekend { 
      width:100px; 
      background:#ccc; 
     } 

     td, 
     th  { 
      overflow:hidden; 
     } 
    .fluid { 

} 
.weekend, 
.row_header{ 
width:50px !important; 

} 

table{ 
    border: 1px solid black; 
    table-layout: fixed; 
    width:100%; 

} 
    </style>​