'Fixed border tables html css

I want to make the borders of the table round. If I change the background color, or make a grid in the table, then everything goes beyond the rounded corners
Is it possible to fix it?

enter image description here

div.blueTable {
  border: 1px solid #2b5378;
  background: linear-gradient(to right bottom, #2b5378a4, #2b537854);
  width: 85%;
  text-align: left;
  border-radius: 15px;
}

.divTable.blueTable .divTableCell,
.divTable.blueTable .divTableHead {
  padding: 5px 10px;
  border: 1px solid #2b5378;
}

.divTable.blueTable .divTableHeading {
  background: rgb(32, 36, 110);
}

.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle .links {
  text-align: right;
}

.blueTable .tableFootStyle .links a {
  display: inline-block;
  color: #FFFFFF;
  padding: 2px 8px;
}

.blueTable.outerTableFooter {
  border-top: none;
}

.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
}
<div class="divTable blueTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">head1</div>
      <div class="divTableHead">head2</div>
      <div class="divTableHead">head3</div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">cell1_1</div>
      <div class="divTableCell">cell2_1</div>
      <div class="divTableCell">cell3_1</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">cell1_2</div>
      <div class="divTableCell">cell2_2</div>
      <div class="divTableCell">cell3_2</div>
    </div>
  </div>
</div>
htmlcss


Solution 1:[1]

a simple solution would be to add overflow: hodden to your 'div.blueTable' rule

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 zergski

Related Questions