एचटीएमएल टेबल - 100% चौड़ाई तालिका, निश्चित चौड़ाई और यूनिफ़ॉर्म तरल कॉलम का संयोजन

Question

मैं HTML और जावास्क्रिप्ट में एक कस्टम कैलेंडर बनाने की कोशिश कर रहा हूं जहां आप एक दिन से दूसरे दिन कार्यों को खींच और छोड़ सकते हैं। मैं पहले कॉलम और अंतिम दो स्तंभों को निश्चित चौड़ाई के रूप में रखना चाहता हूं और शेष कॉलम (सोमवार से शुक्रवार) तरल पदार्थ रखना चाहते हैं ताकि तालिका हमेशा इसके 100% माता-पिता को भर दे।

मेरी समस्या यह है कि तरल पदार्थ टीडी स्वचालित रूप से आकार में कितना सामग्री है, इसका अर्थ यह है कि जब मैं एक दिन से दूसरे कार्य को कॉल करता हूं तो कॉलम चौड़ाई का आकार बदल जाता है। मैं सोमवार से शुक्रवार को सामग्री के बावजूद बिल्कुल वही आकार होना चाहता हूं और पाठ-ओवरफ्लो सेट किए बिना: छुपा; (जैसा कि कार्यों को हमेशा दिखाई देने की आवश्यकता होती है)

यानी मैं चाहता हूं कि ग्रे कॉलम निश्चित चौड़ाई और लाल कॉलम तरल पदार्थ हों, लेकिन उनमें से किसी भी सामग्री के बावजूद प्रत्येक-दूसरे के साथ वर्दी।

संपादित करें: मैं खींचें के लिए jQuery का उपयोग कर रहा और ड्रॉप कार्यक्षमता तो एक जावास्क्रिप्ट समाधान भी ठीक है (हालांकि नहीं बेहतर) होगा।

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> 

सीएसएस:

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 का उपयोग करना (शायद नियमित जे एस के साथ भी किया जा सकता है, लेकिन मैं इसे नौकरियों के इस प्रकार के लिए पसंद करते हैं):

(नोट: मैं मेज एक आईडी दे दी है, तो यह चयन करने के लिए आसान होगा , संवारता का एक सा के साथ बिना किया जा सकता)

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

आप संभवतः कर सका:

.fluid { 
    width:10%; 
} 

Answer 3

कैसे इस बारे में केवल सीएसएस का उपयोग कर?

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

Answer 4

डैनी,

मुझे लगता है कि यह आप क्या देख रहे है।

यहाँ फिडल http://jsfiddle.net/T6YNK/22/

क्रोम में जांच की गई।

कोड

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