Таблица HTML -Таблица ширины 100%, комбинация столбцов фиксированной ширины и UNIFORM Fluid

Я пытаюсь создать собственный календарь в HTML и Javascript, где вы можете перетаскивать задачи с одного дня на другой. Я хотел бы, чтобы первый столбец и последние два столбца имели фиксированную ширину, а остальные столбцы (с понедельника по пятницу )были плавными, чтобы таблица всегда заполняла 100% своего родителя.

Проблема, с которой я сталкиваюсь, заключается в том, что жидкие TD автоматически изменяют свой размер в зависимости от того, сколько в них контента, а это означает, что когда я перетаскиваю задачу с одного дня на другой, ширина столбцов изменяется. Я хотел бы, чтобы с понедельника по пятницу был точно такой же размер независимо от содержимого и без установки text -overflow :hidden; (так как задачи всегда должны быть видны)

то есть я хочу, чтобы серые столбцы были фиксированной ширины, а красные столбцы были плавными, но однородными друг с другом -независимо от содержимого внутри них.

Edit: I'm using jQuery for the drag and drop functionality so a JavaScript solution would also be OK (although not preferable).

Пример JSFiddle Live

HTML:

  

    
Row Header
    
Mon
    
Tue
    
Wed
    
Thurs
    
Fri
    
Sat
    
Sun
  
  

    
Before Lunch
    
This col will be wider than the others because it has lots of content...
    

    

    

    
But I would really like them to always be the same size!
    

    

  

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 {
        ???
    }