У меня есть table внутри другого table. Мой HTML-код выглядит следующим образом.

<td>
 <table>
  <tbody>
    <tr>
      <td class="remind_when"><label>sfd</label></td>
      <td class="remind_when"><label>sdfasdf</label></td>
      <td class="remind_when"><label>sadfasf</label></td>
    </tr>
   </tbody>
 </table>                                                   
</td>

Мой код CSS, как показано ниже

.remind_when{
    border-radius: 5px;
    border: 2px solid #ced4da !important;
    display: inline-block;
}

table, th, td {
    border-collapse: collapse;
}

Я получаю результат, как показано ниже

enter image description here

-2
abu abu 23 Окт 2019 в 18:01

1 ответ

Только элементы, которые отображаются как table-*, будут сворачивать свои границы. Вы сделали элементы td display: inline-block, поэтому они не будут.

Так что не делай этого.

3
Quentin 23 Окт 2019 в 18:04
Спасибо @Quentin за ваш ответ. Но мне не хватает border-radius: 5px;. Как я могу получить border-radius?
 – 
abu abu
23 Окт 2019 в 18:11
1
Вы не можете свернуть границы так, чтобы две ячейки имели одну и ту же смежную границу и по углам.
 – 
Quentin
23 Окт 2019 в 18:16