在两个表行之间居中一个按钮

Question

我甚至不确定这是否可行，但是可以在两个表行的中心放置一个按钮。例如，我有下表：

/*MAIN CONTAINER*/
div#products_box{
    padding: 0;
    margin: 0;
    width: 70%;
    margin: auto;
    border: 2px solid #cccccb;
    height: 130px;
    border-top: 6px solid #ed1c24;
    margin-top: 100px;
    margin-bottom: 30px;


}

/*div#products{
    padding-left: 20px;
    padding-right: 20px;
}*/


button#feed{
    text-transform: uppercase;
    color:#e86065;
    background-color: white;
    border: 1px solid #e86065;
    border-radius: 5px;
    float:right;
    padding-right: 10px;
width: 150px;
    font-size: 1.5em;
}

/*TABLE*/

table{
    width:100%;
    margin-top: 6px;
    border-collapse: collapse; /* no border */
    margin-bottom: 10px;
}

td.avg{
    text-align: center;
}

/*products button*/
td#button{
    margin-top: 20px !important;
    height: 50px;
}

h3#rest_name{
    color: #e86065;
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 20px;
}

p#addr{
    padding:0;
    margin: 0;
    font-size: 0.9em;
    color: #818284;
    margin-left: 20px;
    margin-bottom: 20px;
}

p.title{
    text-transform: uppercase;
    color: #000;
    font-size: 0.7em;
    font-weight: bold;
}

p.rest{
    font-size: 0.8em;
    color: #818284;
    margin-bottom: 20px;
}

td#review{
    float:left;    
}


/*Red bottom border*/

tr#bottom,th{
    padding: 0;
    margin: 0;
    background: #e86065;
    width: 100%;
    border: 1px solid #e86065;
    height: 40px;

}

/*review button*/
button#review_butt{
    float:left;
    color: white;
    text-transform: uppercase;
    background-color:#e86065;
    border: 1px solid #e86065;
    font-size: 0.8em;
}

tr.float{
    margin-left: 20px;    
}

td.float{
    margin-left: 20px;
}

<div id='products_box'>            
  <div id='products'>
  
<table>
  <tr class='float'>
    <td class='float'><h3 id='rest_name'>$rest_name </h3> </td>
    <td class='float'><p class='title'> Price</p></td>
    <td class='avg'><p class='title'>Avg Delivery</p></td>
    <td><p class='title'>Cost</p></td>
    <td></td>
    <td id='button'><a href='product_page.php'><button id='feed'>Feed Me!</button></a></td>
</tr>
<tr class='float'>
<td><p id='addr'>$rest_add,&nbsp;$rest_city</p></td>
<td></td>
<td class='avg'><p class='rest'>$rest_avg mins</p></td>
<td></td>
  </tr>
   <div id='cuisine'>
   <br>
  <tr id='bottom'>
  <td id='review'><a href='review.php'><button id='review_butt'>View Reviews!</button></a></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td><img src='Images/Chef_hat.png' alt='Cuisine' style='width:40px;height:40px;'></td>
  <td>$rest_cat</td>
      </tr>
</div>
</table>

            
            
               
        </div>
        </div>

但我想要“喂我！”按钮在表格行的中间居中，如下所示：

这太过牵强还是有效？

Answer 1

尝试：

<td rowspan="2" id='button'><a href='product_page.php'><button id='feed'>Feed Me!</button></a></td>

这告诉浏览器这个单元格跨越两行。只需确保下一个<tr>最后只有一个<td>。