Wie erstelle ich in HTML eine Schaltfläche mit denselben Eigenschaften wie die letzte Zeile der Tabelle?

Question

Stellen Sie sich vor, ich habe eine Tabelle in HTML:

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

Jetzt möchte ich nur noch eine Schaltfläche am Ende dieser Tabelle hinzufügen. Diese Schaltfläche muss die gleiche Breite haben wie die letzte Zeile der Tabelle (d. h. „Kontakte“) (erkennbar an der Hintergrundfarbe). Was mache ich jetzt? Wenn ich eine Schaltfläche erstelle, hat sie nur die Breite, die sie erstellt:

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

Jetzt benötige ich einen JavaScript-Code, der die Breite des Schaltflächenelements myBtn auf die Breite der Kontaktzeile festlegt?

Answer 1

将 display: block 和 width: 100% 添加到按钮（使用CSS或JS）将使其扩展以填充其列的宽度：

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>

如果您想使用JS实现，可以这样做：

const button = document.getElementById('myBtn')

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