CSS display:table-row How to width:100%? And border-bottom for rows with padding for table content?

trying to create table with 100% width content, but "width" did not work. can anyone help plz. how can I fix it? And there is "div" inside table cos I can't padding content another way. I need paddin from table borders, and i need bottom lines between table rows. without "border-collapse" "border-bottom" did not work for table rows. So i need add one more div just to do padding :(. Can anyone show me how to do it right without adding one more "div" inside table.

  .tabble {
    display: table;
    border-collapse: collapse;
    border-spacing: 10px;
    border-radius: 6px;
    width: 100%;
  }
  .table__row {
    display: table-row;
    width: 100%;
    border-bottom: 1px solid red;
  }

  .table__row:last-child {
    border: none;
  }

  .table__cell {
    display: table-cell;
    width: 20%;
    padding: 10px;
    text-align: left;
  }
.padding-div {
   padding: 5px 20px;
   width: 100%"
}
</style>
<div class="tabble">
  <div class="padding-div">
     <div class="table__row">
       <div class="table__cell">1</div>
       <div class="table__cell">1</div>
     </div>
     <div class="table__row">
       <div class="table__cell">2</div>
       <div class="table__cell">2</div>
     </div>
  </div>
</div>```

Solution

There are a number of things wrong with your table.

There is a typo, " instead of ; in the CSS for .padding-div.
The table cells have width:20%, which interferes with the width calculations. The browser won't know whether to make the two cells together 40% or 100% wide. Remove this.
And the biggest problem, the padding div. You can't have an ordinary div inside a table and with a table row inside. Remove this div. If you want space around the whole table, apply a margin to the table itself.

Then it will have the desired result. That is, if what you want is to make the whole table as wide as the viewport.

.tabble {
  display: table;
  border-collapse: collapse;
  border-spacing: 10px;
  border-radius: 6px;
  width: calc(100% - 40px); /* changed */
  margin: 5px 20px; /* new */
  
}

.table__row {
  display: table-row;
  width: 100%;
  border-bottom: 1px solid red;
}

.table__row:last-child {
  border: none;
}

.table__cell {
  display: table-cell;
  /*width: 20%;*/ /* removed */
  padding: 10px;
  text-align: left;
}

.padding-div {
  padding: 5px 20px;
  width: 100%
}

<div class="tabble">
  <div class="table__row">
    <div class="table__cell">1</div>
    <div class="table__cell">1</div>
  </div>
  <div class="table__row">
    <div class="table__cell">2</div>
    <div class="table__cell">2</div>
  </div>
</div>

Note: if you do want the table to have a border, as you said in the comments, the solution changes a bit. Then the table itself needs to have a padding, and that means you can't use border-collapse, you'll have to use border-spacing:0 instead, which also means you'll need to apply the inside borders to the cells rather than the rows.

.tabble {
  display: table;
  border-spacing: 0; /* changed */
  border-radius: 6px;
  width: calc(100% - 40px); /* changed */
  padding: 5px 20px; /* new */
  border: 1px solid tan; /* purely for demo purposes */
}

.table__row {
  display: table-row;
  width: 100%;
}

.table__cell {
  display: table-cell;
  padding: 10px;
  text-align: left;
}

.table__row:not(:last-child) .table__cell {
  border-bottom: 1px solid red;
}

<div class="tabble">
  <div class="table__row">
    <div class="table__cell">1</div>
    <div class="table__cell">1</div>
  </div>
  <div class="table__row">
    <div class="table__cell">2</div>
    <div class="table__cell">2</div>
  </div>
</div>