HTML CSS Свойство border-radius таблицы не применяется - PullRequest
Новая
       29

HTML CSS Свойство border-radius таблицы не применяется

0 голосов
/ 04 августа 2020

У меня есть таблица в таком формате: 

.main-table {
  margin-top: 1vw;
  margin-left: 1vw;
  height: 30vw;
  overflow-y: auto;
  overflow-x: hidden;
}

table {
  border-collapse: separate;
  border-radius: 3vw;
  border-spacing: 0;
  margin-top: 1vw;
  width: 87vw;
}

td,
th {
  border: none;
}

th {
  height: 2vw;
  background: #deb724;
  font-weight: bold;
}

td {
  height: 3vw;
  background: white;
  text-align: center;
}

tr td:hover {
  background: #d5d5d5;
}
<div class="main-table">
  <table>
    <thead>
      <tr>
        <th> Hello </th>
        <th> World </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Wow look </td>
        <td> What is this </td>
      </tr>
    </tbody>
  </table>
</div>

В таблице есть свойство border-radius, но оно не применяется. Я искал и все, что я мог найти, это установить border-collapse как отдельный, но это тоже не помогло. Любая помощь?

1 Ответ

3 голосов
/ 04 августа 2020

Добавить overflow: hidden в таблицу. 

.main-table {
  margin-top: 1vw;
  margin-left: 1vw;
  height: 30vw;
  overflow-y: auto;
  overflow-x: hidden;
}

table {
  border-collapse: separate;
  border-radius: 3vw;
  border-spacing: 0;
  margin-top: 1vw;
  width: 87vw;
  overflow: hidden;
}

td,
th {
  border: none;
}

th {
  height: 2vw;
  background: #deb724;
  font-weight: bold;
}

td {
  height: 3vw;
  background: white;
  text-align: center;
}

tr td:hover {
  background: #d5d5d5;
}
<div class="main-table">
  <table>
    <thead>
      <tr>
        <th> Hello </th>
        <th> World </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Wow look </td>
        <td> What is this </td>
      </tr>
    </tbody>
  </table>
</div>

Собственно применяется, но выходит за пределы. Мы можем увидеть это, добавив границу к таблице в приведенном ниже фрагменте. Поэтому мы должны добавить overflow: hidden

.main-table {
  margin-top: 1vw;
  margin-left: 1vw;
  height: 30vw;
  overflow-y: auto;
  overflow-x: hidden;
}

table {
  border-collapse: separate;
  border-radius: 3vw;
  border-spacing: 0;
  margin-top: 1vw;
  width: 87vw;
  border: 2px solid red;
}

td,
th {
  border: none;
}

th {
  height: 2vw;
  background: #deb724;
  font-weight: bold;
}

td {
  height: 3vw;
  background: white;
  text-align: center;
}

tr td:hover {
  background: #d5d5d5;
}
<div class="main-table">
  <table>
    <thead>
      <tr>
        <th> Hello </th>
        <th> World </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Wow look </td>
        <td> What is this </td>
      </tr>
    </tbody>
  </table>
</div>
...