Как я могу закруглить углы thead th для закругленного заголовка таблицы?

Я пытаюсь округлить заголовок таблицы thead th слева и справа. У меня они закруглены, но основной tr просвечивает своим фоновым цветом, оставляя меня с двумя th с закругленным углом, но с острым краем, торчащим из thead tr.

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

table thead tr {
  background-color: #005073;
}


table thead tr th {
  width: 200px;
  text-align: center;
}


table {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}


table tbody tr:hover {
  background-color: black;
}


td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}


tr:nth-child(even) {
  background-color: #1ebbd7;
}


tr:first-child th:first-child {
  border-top-left-radius: 6px;
}


tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

<div class = "contentTable">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Address</th>
        <th>State</th>
        <th>Zip-Code</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Bob</td>
        <td>212 Lift St.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Todd</td>
        <td>331 Geromino St.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Jim</td>
        <td>1222 Jumbo Ln.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Susan</td>
        <td>888 Bambi Way</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>5</td>
        <td>James</td>
        <td>112 Falcon Dr.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Abby</td>
        <td>6219 Pumpkin Ln.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
    </tbody>
  </table>
</div>

html css border radius

14.07.2019 02:39

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

158

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

Ответы 2

Вы можете добиться желаемого эффекта, применив border-radius: 6px 6px 0px 0px; ко всей таблице и присвоив ей overflow: hidden.

table thead tr {
  background-color: #005073;
}


table thead tr th {
  width: 200px;
  text-align: center;
}


table {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}


table tbody tr:hover {
  background-color: black;
}


td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}


tr:nth-child(even) {
  background-color: #1ebbd7;
}


table {
  border-radius: 6px 6px 0px 0px;
  overflow: hidden;
}

<div class = "contentTable">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Address</th>
        <th>State</th>
        <th>Zip-Code</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Bob</td>
        <td>212 Lift St.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Todd</td>
        <td>331 Geromino St.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Jim</td>
        <td>1222 Jumbo Ln.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Susan</td>
        <td>888 Bambi Way</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>5</td>
        <td>James</td>
        <td>112 Falcon Dr.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Abby</td>
        <td>6219 Pumpkin Ln.</td>
        <td>Ohio</td>
        <td>43233</td>
      </tr>
    </tbody>
  </table>
</div>

14.07.2019 03:32

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

Изменять

 table thead tr {
     background-color: #005073;
 }

 table thead th {
     background-color: #005073;
 }

14.07.2019 03:55

Другие вопросы по теме

Удаление пробелов между строками и столбцами таблицы HTML

Изменить координаты xy текста svg с помощью медиа-запроса в css или javascript?

Локальный шрифт для китайских шрифтов не применяется к тексту

Смещение вертикального выравнивания пользовательского шрифта

Стиль HTML-элемента не работает в стиле с ограниченной областью действия

Могу ли я иметь тень круглого блока на div шириной и высотой 0

Как привязать div к тексту

Почему «float:right» действует по-разному в этих двух подходах?

Как мне сделать так, чтобы моя цитата реагировала на разные размеры экрана?

Дочерний элемент Flexbox с переполнением родительских полей «overflow: hidden»

Как я могу закруглить углы thead th для закругленного заголовка таблицы?

Ответы 2

Другие вопросы по теме

Похожие вопросы