Как я замораживаю первые и последние столбцы таблицы HTML в отделении с возможностью прокрутки?

Я полагаю, вы хотите прокрутить его только по горизонтали. В противном случае это может привести к путанице со статическими столбцами.

Вы можете поместить переполнение: auto только на содержащий элемент из внутренних ячеек таблицы ... Я не уверен, как браузеры справятся с этим, но вы можете поставить элементы, которые вы хотите зафиксировать внутри элементов thead и tfoot, и поместите прокручиваемую часть в элемент tbody и установите для его переполнения значение auto.

В противном случае вам может понадобиться отбросить семантику и кодировать левый столбец и правый столбец за пределами Таблица.

Лично я бы попробовал закодировать его как можно более семантическим, а затем использовать JavaScript для позиционирования левого и правого столбцов. Без JavaScript вы должны сделать так, чтобы он изящно перестал работать только с широкой таблицей (не уверен, насколько это будет сложно, как вы говорите, у вас фиксированная ширина)

Вы можете попробовать этот (грубый) пример jQuery, чтобы поместить значения первого столбца наружу.

var nameTable = '<table id="outside-name-col">
                  <thead>
                   <tr>
                    <th>Name</th>
                   </tr>
                  </thead>
                 <tbody>'; // start making a table for name column only

$('#scoreTable tbody tr').each(function() { // iterate through existing table

   var nameCol = $(this).find(':first'); // get column of index 0, i.e. first

   var cellHeight = nameCol.height(); // get the height of this cell

   $(this).find('td').height(cellHeight); // equalise the height across the row so removing this element will not collapse the height if it is taller than the scores and total       

   nameTable += '<tr><td style="height: ' + cellHeight + 'px">' + nameCol.html() + '</td></tr>'; // append the next row with new height and data

   nameCol.remove(); // remove this cell from the table now it's been placed outside

});

nameTable += '</tbody></table>'; // finish table string


$('#scoreTable').before(nameTable); // insert just before the score table

Используйте CSS, чтобы расположить их для правильного выравнивания. Это не проверено, но оно должно дать вам некоторое представление.

Вы имели в виду горизонтальную прокрутку ??

Если вы хотите добиться горизонтальной прокрутки, тогда вы можете использовать 3 контейнера.

1. Для первого столбца (Имя)
2. Для столбцов, которые вы хотите прокрутить. Установите для стиля контейнера overflow-x значение auto
3. . Для последнего столбца (всего)

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

Лучший и самый безопасный способ сделать это требует JavaScript. Вы бы легко достигли даже горизонтальной прокрутки (это бесплатно) с помощью этой техники, которую я использовал. Вы можете легко преобразовать это в вашу проблему:

1) Я создал 3 таблицы

2) Поместил среднюю таблицу, в которой хранятся данные, внутри контейнера DIV

3) Установите стиль DIV на переполнение: auto

4) дал заголовок и таблицу нижнего колонтитула и div каждый шириной 100%

5) окружил все другим div для контроля общей ширины таблицы

6) убедился, что количество столбцов совпадает во всех три таблицы, и что все три имеют одинаковые стили в отношении отступов, поля и границы

теперь интересная часть:

6) ниже последнего элемента этой конструкции таблицы, напишите блок javascript (или включите его из файла)

7) напишите функцию, которая последовательно просматривает каждый столбец (используйте цикл for), начиная с первого. На каждой итерации этого цикла проверяйте ячейку td с первыми двумя таблицами в текущем столбце. Проверьте, какой из них больше, и назначьте его стилю меньшей ячейки TD. Возможно, вы захотите применить это значение и к таблице нижнего колонтитула.

8) вызвать эту функцию. Возможно, вы захотите сделать это через интервал или когда произойдут особые события, такие как новые данные в ячейках (например, при использовании ajax).

Примечание. При горизонтальной прокрутке размеры столбцов синхронизируются. Но вам придется синхронизировать позицию прокрутки таблицы верхнего и нижнего колонтитула с таблицей содержимого. В качестве альтернативы вы просто позволяете полному div прокручивать все по горизонтали, но не по вертикали. Это была бы работа DIV, которая содержит таблицу данных.

Этот метод очень хорошо работал во всех основных браузерах в проекте диаграммы Гопта с очень коплексом.

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

Редактировать: Вот еще один пример из моей базы кода, который может помочь вам найти решение:

var left_td = document.getElementById("left_td");
var right_td = document.getElementById("right_td");
var contentDiv = document.getElementById("contentDiv");
window.setInterval(function(){
    var left_td_width = Math.round((parseInt(contentDIV.offsetWidth) - 120) / 2);
    var right_td_width = (parseInt(contentDIV.offsetWidth) - left_td_width - 120;

    left_td.style.width = left_td_width + "px";
    right_td.style.width = right_td_width + "px";
}, 25);

Этот код выполняет следующие действия: , таблица с 3 столбцами всегда выглядит так: первый и последний столбцы имеют одинаковый размер, а центральный столбец имеет ширину 120 пикселей. В качестве альтернативы вы просто позволяете полному div прокручивать все по горизонтали, но не по вертикали. Это была бы работа DIV, которая содержит таблицу данных.

Этот метод очень хорошо работал во всех основных браузерах в проекте диаграммы Гопта с очень коплексом.

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

Редактировать: Вот еще один пример из моей базы кода, который может помочь вам найти решение:

var left_td = document.getElementById("left_td");
var right_td = document.getElementById("right_td");
var contentDiv = document.getElementById("contentDiv");
window.setInterval(function(){
    var left_td_width = Math.round((parseInt(contentDIV.offsetWidth) - 120) / 2);
    var right_td_width = (parseInt(contentDIV.offsetWidth) - left_td_width - 120;

    left_td.style.width = left_td_width + "px";
    right_td.style.width = right_td_width + "px";
}, 25);

Этот код выполняет следующие действия: , таблица с 3 столбцами всегда выглядит так: первый и последний столбцы имеют одинаковый размер, а центральный столбец имеет ширину 120 пикселей. В качестве альтернативы вы просто позволяете полному div прокручивать все по горизонтали, но не по вертикали. Это была бы работа DIV, которая содержит таблицу данных.

Этот метод очень хорошо работал во всех основных браузерах в проекте диаграммы Гопта с очень коплексом.

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

Редактировать: Вот еще один пример из моей базы кода, который может помочь вам найти решение:

var left_td = document.getElementById("left_td");
var right_td = document.getElementById("right_td");
var contentDiv = document.getElementById("contentDiv");
window.setInterval(function(){
    var left_td_width = Math.round((parseInt(contentDIV.offsetWidth) - 120) / 2);
    var right_td_width = (parseInt(contentDIV.offsetWidth) - left_td_width - 120;

    left_td.style.width = left_td_width + "px";
    right_td.style.width = right_td_width + "px";
}, 25);

Этот код выполняет следующие действия: , таблица с 3 столбцами всегда выглядит так: первый и последний столбцы имеют одинаковый размер, а центральный столбец имеет ширину 120 пикселей. Конечно, это не относится непосредственно к вашей особой проблеме, но может дать вам отправную точку в динамическом манипулировании таблицами с помощью JavaScript.