Денис Инешин

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

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

Как это вы так прыгнули от CSS к React?

Нельзя просто взять и выучить React. А JavaScript вы знаете?
В общем стать любым разработчиком очень сложно: https://github.com/zualex/devmap

С SVG ничего делать не нужно.

А вот с обычными картинками нужно.
1. Представьте себе квадрат 100х100 пикселей
2. В обычной ситуации вы вставите в него картинку 100х100 пикселей и все прекрасно
3. Но! На ретина экранах эта картинка будет выглядеть ужасно размыто и пикселизовано.
4. Чтобы этого избежать - вам нужно вставить в этот квадрат картинку 200х200 пикселей, но ширину и высоту задать по прежнему 100 пикселей (или если это фон, сделать background-size: cover;)
5. Примерно так в кратце это выглядит.

А дальше читайте хабр:
https://habr.com/ru/post/150071/
https://habr.com/ru/post/139682/
https://habr.com/ru/post/155683/

С помощью clip-path: https://jsfiddle.net/fyv0ezg9/

или с помощью фигур https://html5book.ru/css-figury/

Например вот так: matthew.wagerfield.com/parallax

В данном вопросе поможет здравый смысл и тестирование.

Допустим у нас есть абстрактное фоновое изображение как часть UI. В большинстве случаев для подобных изображений достаточно будет иметь коэффициент 1х - 1.5х.

Если изображение более детальное - ставим для начала коэффициент 2х и смотрим как это выглядит на живом смартфоне. Обычно коэффициента 2х более чем достаточно для детальных изображений или фотографий.

Коэффициента больше чем 2х могут потребовать разве что схемы с тонкими линиями.

Mobile first media query.

По мере увеличения разрешения грузить большее изображение.

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

.body {
    background-image: SMALL
}

@media (min-width: 1000px) {
    .body {
        background-image: BIG
    }
}

@media (min-width: 2000px) {
    .body {
        background-image: SUPER_BIG
    }
}

Событие `click` - это на самом деле последовательность из 2 событий: mousedown, а затем mouseup (или touchstart, touchend. Pointerdown -> pointerup).

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

let pressed = false;

item.addEventListener("pointerdown", function () {
    pressed = true; // регистрируем нажатие
});

document.addEventListener("pointerup", function () {
    pressed = false; // убираем нажатие
});

Воспользуйтесь D3.js: https://github.com/d3/d3-shape