css 如何在表格的末尾创建一个按钮,其宽度与HTML中表格的最后一行相同?

9ceoxa92  于 2023-08-09  发布在  其他
关注(0)|答案(1)|浏览(117)

假设我有一个HTML表格:

<table>
<tr>
    <td>Home</td>
</tr>
<tr>
    <td>Service</td>
</tr>
<tr>
    <td>Contacts</td>
</tr>

字符串
现在我只需要在这个表的末尾添加一个按钮,它必须与表的最后一行Contacts具有相同的宽度(由其背景色表示)。我该怎么做当我创建一个按钮时,它只是具有自己创建的宽度:

<button type="button" id='myBtn'>Click</button>


现在我需要一个JavaScript代码来设置按钮myBtn元素的宽度为“联系人”行的宽度吗?

h43kikqp

h43kikqp1#

<button>内部<table>

display: blockwidth: 100%添加到按钮(使用CSS或JS)将使其扩展以填充其列的宽度:

table {
  border-collapse: collapse;
  border: 2px solid black;
}

td {
  background: yellow;
  padding: 0;
}

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

个字符
如果你想用JS来做,它会是这样的:

const button = document.getElementById('myBtn')

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

<table>后的<button>

如果你想让按钮在表外,你可以添加一个<div>display: inline-block,它 Package 了<table><button>

#wrapper {
  display: inline-block;
}

table {
  border-collapse: collapse;
  border: 2px solid black;
}

td {
  background: yellow;
  padding: 0;
}

button {
  background: cyan;
  width: 100%;
  border: 0;
  display: block;
}
<div id="wrapper">
  <table>
    <tr>
      <td>Home</td>
    </tr>
    <tr>
      <td>Service</td>
    </tr>
    <tr>
      <td>Contacts</td>
    </tr>
  </table>

  <button type="button" id='myBtn'>Click</button>
</div>

的字符串

相关问题