将按钮放在 table 单元格的右侧，但保持在同一行

Question

我在同一行上有 table 个电子邮件地址和 6 个复选框。我需要让编辑电子邮件地址的按钮与其位于同一行。目前它与电子邮件地址位于同一单元格中。编辑按钮拥有自己的单元格会更好吗？或者是否有可行的样式选项？感谢您的帮助，祝您有愉快的一天。

<tr>
    <td style="white-space: nowrap; width: @Html.Raw(width + "px;") min-width:@Html.Raw(width + "px;")">
      <span id="emailAlertOwnerlabel"></span><b> - Owner</b>
      <input type="button" value="Edit" id="editOwnerEmailAlert" style="float: right;" class="btn btn-default btn-block-mobile btn-xs" tabindex="135">-->
   </td>
    <td class="text-center" style="width: @Html.Raw(width + "px;") min-width:@Html.Raw(width + "px;")" text-align:center; vertical-align:middle;">
        <input type="checkbox" class="sub-col-1 dont-get-data" data-billaccount="emailField" data-subtype="15" />
    </td>
    <td style="width: @Html.Raw(width + "px;") min-width:@Html.Raw(width + "px;")">
        <input type="checkbox" class="sub-col-2 dont-get-data" data-billaccount="emailField" data-subtype="16" />
    </td>
    <td style="width: @Html.Raw(width + "px;") min-width:@Html.Raw(width + "px;")">
        <input type="checkbox" class="sub-col-3 dont-get-data" data-billaccount="emailField" data-subtype="17" />
    </td>
    <td style="width: @Html.Raw(width + "px;") min-width:@Html.Raw(width + "px;")">
        <input type="checkbox" class="sub-col-4 dont-get-data" data-billaccount="emailField" data-subtype="18" />
    </td>
    <td style="width: @Html.Raw(width + "px;") min-width:@Html.Raw(width + "px;")">
    <input type="checkbox" class="sub-col-5 dont-get-data" data-billaccount="emailField" data-subtype="19" />
    </td>
    <td style="width: @Html.Raw(width + "px;") min-width:@Html.Raw(width + "px;")">
        <input type="checkbox" class="sub-col-6 dont-get-data" data-billaccount="emailField" data-subtype="20" />
    </td>
    <td style="width: @Html.Raw(width + "px;") min-width:@Html.Raw(width + "px;")">
        <input type="checkbox" class="sub-col-7 dont-get-data" data-billaccount="emailField" data-subtype="21" />
    </td>
</tr>

Answer 1

希望对您有所帮助：

<table>
<tr>
    <td style="white-space: nowrap; width: 145px; min-width:145px;">
    <span  id="emailAlertOwnerlabel">b@b.com</span><b> - Owner</b>
    <input type="button" value="Edit" id="editOwnerEmailAlert" style="position:relative;" class="btn <btn->      </btn->default btn-block-mobile btn-xs" tabindex="135">
  </td>
</tr>
</table>

Answer 2

像这样将它添加到自己的单元格中。如果这有帮助，请单击答案。

<table>
<tr>
    <td style="white-space: nowrap; width: 145px; min-width:145px;">
    <span id="emailAlertOwnerlabel">b@b.com</span><b> - Owner</b>
    </td>
    <!-- <td> insert button here </td> -->
    <td><input type="button" value="Edit" id="editOwnerEmailAlert" style="" class="btn <btn->      </btn->default btn-block-mobile btn-xs" tabindex="135">
  </td>
</tr>
</table>

<!-- inside its own <td> -->

将按钮放在 table 单元格的右侧，但保持在同一行

Place button to the right of a table cell, but keep it on the same line

html

html-table

tablecell