html - Weird margin in editable table -

when try code editable table in pure html & css, run in indesiderate issue. if table-layout attribute set auto have strange margin applied right of cell i'm editing.

is there way keep full width of table without strange margin applied content i'm edit?

below code snippet better explain i'm talking about:

table {    width: 100%;  }  table,tr,th,td {    border: 1px solid black;    border-collapse: collapse;    padding: 10px;    table-layout: auto;  }

<table contenteditable='true'>    <thead>      <tr>        <th>header1</th>        <th>header2</th>        <th>header2</th>      </tr>    </thead>    <tbody>      <tr>        <td>content</td>        <td>content</td>        <td>content</td>      </tr>    </tbody>    <tbody>      <tr>        <td>content</td>        <td>content</td>        <td>content</td>      </tr>      <tr>        <td>content</td>        <td>content</td>        <td>content</td>      </tr>    </tbody>  </table>