Блог

Мне нужно внести корректировку CSS, чтобы компенсировать полосу прокрутки. Итак, мне было интересно — полосы прокрутки всегда имеют одинаковую ширину в разных браузерах и операционных системах?

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

Полосы прокрутки даже не считаются одинаковыми в разных браузерах, некоторые из них помещают их внутрь рамки, в то время как другие выводят их наружу (что затрудняет выравнивание).

Попытайтесь придумать способ представления данных, при котором это не будет иметь значения.

Мне нужно внести корректировку CSS, чтобы компенсировать полосу прокрутки. Итак, мне было интересно — полосы прокрутки всегда имеют одинаковую ширину в разных браузерах и операционных системах?

Нет, и в некоторых системах их ширина настраивается пользователем.

ПРЕЛЕСТЬ!Вот решение для всех, у кого такая же проблема. Это также должно быть совместимо с несколькими браузерами.

Просто добавьте полосу прокрутки в верхнюю таблицу, а также немного дополнительного CSS, чтобы скрыть их.

 #topTable{
    overflow: scroll;
    padding-right: 16px;
    padding-bottom: 16px;
    margin-right: -16px;
    margin-bottom: -16px;
}
  

Теоретически, все, что вам нужно сделать, это сопоставить «16 пикселей», чтобы вы могли сделать это с тем же эффектом:

 #topTable{
    overflow: scroll;
    padding-right: 100px;
    padding-bottom: 100px;
    margin-right: -100px;
    margin-bottom: -100px;
}