Bagaimana untuk mencipta butang dalam HTML dengan sifat yang sama seperti baris terakhir jadual?

Question

Pertimbangkan saya mempunyai jadual dalam HTML:

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

Sekarang saya hanya mahu menambah butang di hujung jadual ini, butang ini mesti mempunyai lebar yang sama dengan baris terakhir jadual (iaitu "Kenalan") (ditunjukkan oleh warna latar belakangnya). Sekarang, apa yang saya buat? Apabila saya mencipta butang, ia hanya mempunyai lebar yang dihasilkannya:

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

Sekarang saya memerlukan kod JavaScript yang menetapkan lebar butang myBtn elemen kepada lebar baris Kenalan?

Answer 1

Menambah display: block 和 width: 100% pada butang (menggunakan CSS atau JS) akan menyebabkannya mengembang untuk memenuhi lebar lajurnya:

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>

Jika anda ingin melaksanakannya menggunakan JS, anda boleh melakukan ini:

const button = document.getElementById('myBtn')

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