如何将按钮添加到html表格单元格?

时间:2021-02-11 04:23:30

标签: html

我必须创建一个 HTML 表来从数据库中检索数据。在每一行中,我需要添加一个名为 status 的按钮。我怎么做? 这是我的表代码

<table class="table">
  <thead>
    <tr>
      <th scope="col">Reference No</th>
      <th scope="col">Description</th>
      <th scope="col">Assigned Date</th>
      <th scope="col">Status
      </th>
   </tr>
</thead>
<body>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
 </tr>
 <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
 </tr>
<tr>
    <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
</tr>

这是示例表的图像 image 除了这些文本,我需要添加名为 status 的按钮来更改状态。

2 个答案:

答案 0 :(得分:1)

如果你是从数据库打印,那么你可以写这个

 <table class="table">
      <thead>
        <tr>
          <th scope="col">Reference No</th>
          <th scope="col">Description</th>
          <th scope="col">Assigned Date</th>
          <th scope="col">Status
          </th>
       </tr>
    </thead>
    <body>
      <tr>
        <th scope="row"><?php echo $refid ?></th>
        <td><?php echo $description ?></td>
        <td><?php echo $assigneddate ?></td>
        <td><?php echo $status ?><button>Status</button></td>
     </tr>
   

答案 1 :(得分:1)

请尝试一次..

table, td, th {
  border: 1px solid black;
  text-align:center
}

table {
  width: 100%;
  border-collapse: collapse;
}
<table class="table">
  <thead>
    <tr>
    <th></th>
      <th scope="col">Reference No</th>
      <th scope="col">Description</th>
      <th scope="col">Assigned Date</th>
      <th scope="col">Status
      </th>
   </tr>
</thead>
<body>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
    <td><button>status</button></td>
 </tr>
 <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td> 
    <td><button>status</button></td>
 </tr>
<tr>
    <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td> 
    <td><button>status</button></td>
</tr>