国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Community

Learn

Tools Library

AI Tools

Leisure

English

How to create a button in HTML with the same properties as the last row of the table?

P粉394812277 2023-09-16 22:19:11

805

Consider I have a table in HTML:

<table>
<tr>
    <td>首頁</td>
</tr>
<tr>
    <td>服務(wù)</td>
</tr>
<tr>
    <td>聯(lián)系人</td>
</tr>

Now I just want to add a button at the end of this table, the width of this button must be the same as the width of the last row of the table (i.e. "Contacts") (indicated by its background color). Now, what do I do? When I create a button it only has the width it creates:

<button type="button" id='myBtn'>點(diǎn)擊</button>

Now I need a JavaScript code that sets the width of the button myBtn element to the width of the "Contact" row?

P粉394812277

reply all(1)

P粉8113290342023-09-17 00:10:25 1 floor

Adding display: block and width: 100% to the button (using CSS or JS) will make it expand to fill the width of its column:

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>

If you want to use JS, you can do this:

const button = document.getElementById('myBtn')

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

Like +0

Add Reply