Tabela HTML - tabela o szerokości 100%, kombinacja stałej szerokości i kolumn kolumn UNIFORM

Question

Próbuję utworzyć niestandardowy kalendarz w języku HTML i JavaScript, w którym można przeciągać i upuszczać zadania z jednego dnia do drugiego. Chciałbym, aby pierwsza kolumna i dwie ostatnie kolumny miały stałą szerokość, a pozostałe kolumny (od poniedziałku do piątku) były płynne, tak aby tabela zawsze wypełniała 100% jej rodzica.

Problem, który mam, polega na tym, że płynne TD rozkładają się automatycznie na podstawie ilości zawartej w nich zawartości, co oznacza, że ​​gdy przeciągam zadanie z jednego dnia do drugiego, szerokość kolumn zmienia się. Chciałbym mieć od poniedziałku do piątku dokładnie taki sam rozmiar niezależnie od zawartości i bez ustawiania przepełnienia tekstu: ukryty; (ponieważ zadania zawsze muszą być widoczne)

tj. chcę, aby szare kolumny ustalały szerokość, a czerwone kolumny były płynne, ale jednolite względem siebie, bez względu na zawartość w nich zawartą.

Edit: używam jQuery dla przeciągnij i upuść więc rozwiązanie JavaScript byłoby również OK (chociaż nie zalecane).

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

jQuery (prawdopodobnie mogłyby być wykonane ze zwykłej JS też, ale ja wolę go do tego rodzaju pracy):

(Uwaga: Dałem tabelę identyfikatora więc łatwiej będzie wybrać , można to zrobić bez niego z odrobiną majstrować)

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

można ewentualnie zrobić:

.fluid { 
    width:10%; 
} 

Answer 3

Jak o tym przy użyciu tylko CSS?

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

Answer 4

Danny,

myślę, że to jest to, czego szukasz.

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

sprawdzone w Chrome.

Kod

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