CODEWITHSUNDEEP
htmlhtml-tabletablecell
Josh
Josh

Reputation: 71

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

I have a table of email addresses and 6 checkboxes on the same line. I need to have the button to edit the email address be on the same line as it. Currently it's in the same cell as the email address. Would it be better for the edit button to have it's own cell? Or is there a style option that would work? Thanks for your help and have a great day.

JSFiddle: http://jsfiddle.net/0g5eax7t/

<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>

Upvotes: 0

Views: 33

Answers (2)

Zapp
Zapp

Reputation: 232

Add it to its own cell like this. If this helped click answer. 

<table>
<tr>
    <td style="white-space: nowrap; width: 145px; min-width:145px;">
    <span id="emailAlertOwnerlabel">[email protected]</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> -->

Upvotes: 1

Matt
Matt

Reputation: 492

I hope this could help:

<table>
<tr>
    <td style="white-space: nowrap; width: 145px; min-width:145px;">
    <span  id="emailAlertOwnerlabel">[email protected]</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>

Upvotes: 0

Related Questions