HTML CSS таблица с закругленными углами

У меня небольшая проблема с моим столом. Он стилизован под классы. Один для TABLE, который делает закругленные углы и меняет фон на серый. Другой — сделать остальную часть таблицы белой и назначить ее TBODY. После присвоения второго класса левый и правый нижний углы больше не закругляются.

<table align=center class = "grey">
  <thead>
    <tr height=50>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody class = "white">
    <tr height=50>
      <td>row two</td>
      <td>row two</td>
    </tr>

    <tr height=50 class = "white">
      <td>row three</td>
      <td>row three</td>
    </tr>
  </tbody>
</table>

body {
  background: #000;
}

table.grey {
    background: #F6F2F5;
    border: 3px solid #FFF;
    text-align: center;
    width: 80%;
    padding: 15px;
    border-collapse: collapse;
    border-left: 0;
    border-right: 0;
    border-radius: 10px;
    border-spacing: 0px;
}
.white {
  background: #FFF;
  color: #000;
  padding: 50px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Присвоение класса TR каждой строки дает тот же результат, что и TBODY. Я тупой. https://jsfiddle.net/2tm4z90b/8/

Тело нельзя стилизовать, его не должно быть видно, это семантическая оболочка.

— 14.11.2022 09:59

html css rounded-corners border-radius

13.11.2022 23:43

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Как это.

table {
  border-radius: 5px;
  border: 1px solid black;
}
table thead {
    background: gray;
}

<table align=center class = "grey">
  <thead>
    <tr height=50>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody class = "white">
    <tr height=50>
      <td>row two</td>
      <td>row two</td>
    </tr>

    <tr height=50 class = "white">
      <td>row three</td>
      <td>row three</td>
    </tr>
  </tbody>
</table>

Это не единственная таблица здесь, поэтому я не могу использовать ваш css

— 14.11.2022 00:09

Вы можете использовать его для нескольких таблиц или одной таблицы. Просто отрегулируйте ширину css .class , #id или table в элементе.

— 14.11.2022 00:41

Вы исправили конфликтующий код, удалив его. Это совсем не исправить.

— 14.11.2022 14:48

13.11.2022 23:47

Ответ принят как подходящий

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

Вариант

установить радиус только на столе и использовать переполнение.
при необходимости подделайте границу с помощью box-shadow, чтобы она соответствовала округлой форме

Возможный пример:

body {
  background: #000;
}

table.grey{
    margin-top:3em;
    background: gray;
    box-shadow:0 0 0 3px red;/* instead border */
    text-align: center;
    width: 80%;
    padding: 15px;
    border-collapse: collapse;
    border-left: 0;
    border-right: 0;
    border-radius: 10px;
    border-spacing: 0px;
    overflow:hidden; /* hide overflowing cells */
}
.white tr {
  background: #bee;
  color: #000;
  padding: 50px;  
}

<table align=center class = "grey">
  <thead>
    <tr height=50>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody class = "white">
    <tr height=50>
      <td>row two</td>
      <td>row two</td>
    </tr>

    <tr height=50>
      <td>row three</td>
      <td>row three</td>
    </tr>
  </tbody>
</table>

overflow:hidden заставил его работать с моим кодом. Даже не нужно было использовать box-shadow. Спасибо, я твой должник ^^

— 14.11.2022 14:47

14.11.2022 09:56