- Tabella larghezza 100%, combinazione di colonne a larghezza fissa e UNIFORM

Question

Sto cercando di creare un calendario personalizzato in HTML e Javascript in cui è possibile trascinare le attività da un giorno all'altro. Mi piacerebbe avere la prima colonna e le ultime due colonne a larghezza fissa e avere le colonne rimanenti (dal lunedì al venerdì) fluide in modo che la tabella riempia sempre il 100% del suo genitore.

Il problema che sto avendo è che i TD fluidi si dimensionano automaticamente in base alla quantità di contenuto in essi contenuto, il che significa che quando trascino un'attività da un giorno all'altro le larghezze delle colonne vengono ridimensionate. Mi piacerebbe avere dal lunedì al venerdì esattamente le stesse dimensioni indipendentemente dal contenuto e senza l'impostazione di overflow del testo: nascosto; (dato che le attività devono sempre essere visibili)

, cioè voglio le colonne grigie a larghezza fissa e le colonne rosse fluide ma uniformi l'una con l'altra indipendentemente dal contenuto al loro interno.

Edit: sto usando jQuery per la funzionalità drag and drop così una soluzione JavaScript sarebbe anche OK (anche se non è preferibile).

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

utilizzando jQuery (potrebbe probabilmente essere fatto con regolare JS troppo, ma lo preferisco per questo tipo di posti di lavoro):

(Nota: ho dato il tavolo un ID in modo sarà più facile per selezionare , può essere fatto senza che con un po 'di ritocchi)

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

si potrebbe forse fare:

.fluid { 
    width:10%; 
} 

Answer 3

ne dite di questo utilizzando solo i CSS?

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

Answer 4

Danny,

credo che questo sia quello che stai cercando.

Fiddle qui http://jsfiddle.net/T6YNK/22/

Controllato in Chrome.

Codice

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