Comment créer un bouton en HTML avec les mêmes propriétés que la dernière ligne du tableau ?

Question

Considérez que j'ai un tableau en HTML :

<table>
<tr>
    <td>首页</td>
</tr>
<tr>
    <td>服务</td>
</tr>
<tr>
    <td>联系人</td>
</tr>

Maintenant, je souhaite juste ajouter un bouton à la fin de ce tableau, ce bouton doit avoir la même largeur que la dernière ligne du tableau (c'est-à-dire "Contacts") (indiqué par sa couleur de fond). Maintenant, qu'est ce que je fais? Lorsque je crée un bouton, il n'a que la largeur qu'il crée :

<button type="button" id='myBtn'>点击</button>

Maintenant, j'ai besoin d'un code JavaScript qui définit la largeur de l'élément bouton myBtn sur la largeur de la ligne Contacts ?

Answer 1

L'ajout de display: block 和 width: 100% à un bouton (en utilisant CSS ou JS) le fera s'étendre pour remplir la largeur de sa colonne :

td {
  background: yellow;
  padding: 0;
}

button {
  background: cyan;
  width: 100%;
  border: 0;
  display: block;
}

<table>
  <tr>
      <td>Home</td>
  </tr>
  <tr>
      <td>Service</td>
  </tr>
  <tr>
      <td>Contacts</td>
  </tr>
  <tr>
      <td>
        <button type="button" id='myBtn'>Click</button>
    </td>
  </tr>
</table>

Si vous souhaitez l'implémenter en utilisant JS, vous pouvez faire ceci :

const button = document.getElementById('myBtn')

button.style.width = '100%';
button.style.display = 'block';