Табличка CSS, прыгающая сбоку?

Question

У нас есть таблица CSS - сделанная CSS & DIVS.

меню правой стороны фиксируется на уровне 20%, & это, кажется, работает нормально ...

в середине экрана, у нас есть таблица 4-5 строк информации. Верхняя строка таблицы - это ссылка на каждый столбец для сортировки.

имеет только несколько строк данных (мы добавим «страницы» в дальнейшем, когда мы получаем больше данных)

Проблема, в том, что, когда страница обновляется, когда мы выбираем ссылку, (ТОТ ЖЕ сортировать или другой вид - или просто обновить экран), средний стол «прыгает» влево или вправо. Он не остается в том же положении на экране. & очень раздражает.

СОДЕРЖАНИЕ таблица сама по себе такая же ширина - размер таблицы не меняется. но сама таблица сдвигает положение ...

http://animals.kwister.com/directory/region

(попробуйте ссылки на верхней части таблицы).

Есть ли способ, чтобы стол «фиксировался» в «центре» доступного пространства - уменьшен с помощью правого меню/правой боковой панели.

Конечно, поскольку я добавляю больше данных/текста - ширина таблицы будет увеличиваться, чтобы справиться, но она останется «по центру».

Мы можем добавить левое меню/div в будущем, мы просто разрабатываем этот сайт &, его пока мало что показать. Это первый раз, когда я видел css-таблицу «shift» следующим образом.

Answer 1

Его причиной является фиксированное расположение стола и тот факт, что вы добавляете боковую панель с помощью js.

Возможно, вам нужно изучить CSS-сетку, такую ​​как bootstrap для более согласованных макетов. или сделать свой собственный с дисплеем: block, float: left и widh: x%;

.column-left, .column-right { 
display: block; 
width: 20%; 
float: left; 
} 
.column-center { 
display: block; 
width: 60%; 
float: left; 
} 

или вы могли бы сделать быстрый и грязный исправить CSS на правой колонке и поместите его абсолютной:

display: block; 
width: 20%; 
float: left; 

Answer 2

Я заметил, что «сообщения» область загружается во время выполнения с помощью JavaScript.

Изначально нет содержимого в DIV:

<div id="messages" style="float:right; display: inline; width:20%;"></div> 

Может быть, вы можете попробовать добавить nbsp; внутри DIV, как это. Это может привести к тому, что ширина «20%» будет работать.

<div id="messages" style="float:right; display: inline; width:20%;">&nbsp;</div> 

То, что я увидел, что после первой загрузки страницы таблица центрируется на все окно, как будто «сообщения» ДИВ не было (что правильно, потому что его содержание загружается после этого). Затем, когда присутствует содержимое «сообщений», таблица сосредотачивается на оставшейся ширине.