Как сделать скругление углов таблицы в css?

Question

Как сделать скругление углов таблицы в css?

Тимур Калимуллов Ученик (216), на голосовании 4 месяца назад

Был дан данный сайт. Попросили сделать скругление углов таблицы в css и убрать из js. Т.к. я относительно недавно занимаюсь css, html и js, я уже несколько дней пытаюсь сделать это сам и параллельно ищу в интернете, но пока получается только ломать табличку сайта, без видимого результата. И стоит условие: "Только первое и последнее слово имеют border-radius", т.е. округление углов таблицы

Дополнен 5 месяцев назад

ссылка на архив с сайтом
https://disk.yandex.ru/d/bDS-lqBJmaVH6g

Answer 1

Максим Искусственный Интеллект (213208) 5 месяцев назад

Вот и используй border-radius.

Тимур КалимулловУченик (216) 5 месяцев назад

я делал так, но вот два скриншота, 1 как должно быть, 2 как выходит

Максим Искусственный Интеллект (213208) Тимур Калимуллов, это не похоже на table. Разве он может так съехать?

Answer 2

никак... да и на планете многие вещи не расчитаны на хотелки идиотов.

Answer 3

"дан данный" сайт
круто

хоть в твоём js и есть код который якобы углы круглыми делает, на самом деле это ни на что не влияет
скругление в твоём css, в строках

   .column1 { 
    border-radius: 8px 0 0 8px; 
    background-color: rgba(216, 216, 216); 
  } 
  .column2 { 
    border-radius: 0 8px 8px 0; 
    background-color: rgb(180, 179, 179); 
  }

попробуй убрать строки для border-radius и округлость пропадёт...

Answer 4

Такую таблицу лучше делать обычными блоками и скругление задавать родителю с элементами. Если так, то выбирать колонки и задавать border-top-left-radius и т.д.