Как исправить разрыв в таблице HTML с закругленными углами? - PullRequest
Новая
       22

Как исправить разрыв в таблице HTML с закругленными углами?

0 голосов
/ 09 мая 2019

У меня нет доступа к изменению основного HTML, только CSS, но таблицы, с которыми я работаю, имеют странный пробел в углах, которые я пытаюсь исправить. 

.tabular-container {
  border: 2px solid #0093c9;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.heading-row {
  background: #0093c9;
  font-weight: bold;
}

table {
  font-family: Arial;
  width: 100%;
  border-collapse: collapse;
  background: white;
  overflow-x: hidden;
}

th,
td {
  padding: 10px;
  text-align: left;
}
<div class="tabular-container">
  <table class="">
    <thead class="">
      <tr class="heading-row">
        <th colspan="2">Rounded corners table</th>
      </tr>
    </thead>
    <tbody>
      <tr class="tabular__row">
        <td>kk</td>
        <td>kk</td>
      </tr>
      <tr class="tabular__row">
        <td colspan="2">This is a sample table only</td>
      </tr>
    </tbody>
  </table>
</div>

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Простой, установите: border-radius:0; на вашем столе.

Браузер пытается установить радиус углов таблицы, чтобы соответствовать, но получает ошибку округления. Используя радиус: 0, вы заставляете браузер «обрезать» угол.

1 голос
/ 09 мая 2019

Делает ли трюк весь стол и фон в цвете, а тело обратно в белый? 

.tabular-container {
  background: #0093c9;
}

table {
  font-family: Arial;
  width: 100%;
  border-collapse: collapse;
  background: white;
  overflow-x: hidden;
  background: #0093c9;
}

tbody{
  background: white;
}


.tabular-container {
  border: 2px solid #0093c9;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  background: #0093c9;
}

.heading-row th{
  font-weight: bold;
}

table {
  font-family: Arial;
  width: 100%;
  border-collapse: collapse;
  background: white;
  overflow-x: hidden;
  background: #0093c9;
}

th,
td {
  padding: 10px;
  text-align: left;
}

tbody{
  background: white;
}
<div class="tabular-container">
  <table class="">
    <thead class="">
      <tr class="heading-row">
        <th colspan="2">Rounded corners table</th>
      </tr>
    </thead>
    <tbody>
      <tr class="tabular__row">
        <td>kk</td>
        <td>kk</td>
      </tr>
      <tr class="tabular__row">
        <td colspan="2">This is a sample table only</td>
      </tr>
    </tbody>
  </table>
</div>
...