Помощь с версткой

Здравствуйте,

Столкнулся с проблемой при верстке таблицы. Обрыл много, но нужного так и не могу найти. Помогите пожалуйста решить следующую задачу:

1. Есть таблица. В ней 11 столбцов.

2. Данные в таблицу будут получены через XML после запроса. (но это для общего представления, сильно к делу не относиться).

И так нужно сверстать следующим образом:

- Некоторые столбцы имеют фиксированную ширина (не всегда одинаковую, но фиксированную). - тут то, впринципе, проблем нет.

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

3. Вместе таблица должна занимать 100% ширины.

Буду благодарен за помощь. Спасибо заранее.

Также буду благодарен за помощь в реализации 2 элементов страницы.

Итак, картинка для наглядности:

1. Над левым блоком есть поле фильтрации по имени. Не получается реализовать. Пробовал jquery live filter и другие, но они не работают. Подозреваю что из-за того, что элементы начинаются из checkbox.

Пример как сверстано:

<div id="hotels_select_block">

<div id="list_hotels" style="border: 1px solid #cecece; background: #fff;height: 261px;overflow:scroll;">

<ul id="list-style">

<li>

<input id="hotel" value="" name="hotel" type="checkbox" checked="" onchange="styleChebox(this);GetListOfHotels();"/>

<label style="font-weight: bold;" for="hotel">Adam & Eve Hotels SC</label>

</li>

<li>

<input id="hotel" value="" name="hotel" type="checkbox" checked="" onchange="styleChebox(this);GetListOfHotels();"/>

<label style="font-weight: bold;" for="hotel">Adonis Hotel 5*</label>

</li>

2. Эти же 2 блока. Нужно реализовать, чтобы при выборе элемента в левом боксе, он автоматически переносился в правый (как на скрине), а при нажатии на эго название в правом боксе, он оттуда убирался и в левом с него снималось выделение. Здесь еще нюанс:

- Если стоит галочка (тоесть элемент выбран), эго label должен быть жирным, а при снятии выделения - обычным шрифтом.

- По умолчанию - выбраны все элементы.

Буду ОЧЕНЬ благодарен Вам за помощь.