Positioning a button beside an input field within a table row

This is how my current table layout appears.

Table:

https://i.sstatic.net/wcHuz.png

I am attempting to position the small x button next to the input textbox. Here is the code I have written so far.

<table class="table table-hover">
    <thead class="thead-inverse">
        <th>Clave</th>
        <th>Razón social</th>
        <th>Contacto 1</th>
        <th>Contacto 2</th>
        <th>Contacto 3</th>
        <th></th>
    </thead>
    <tbody>
        <td class="col-md-1">
            <input type="text" name="" class="form-control"/>
        </td>
        <td class="col-md-3">
            <input type="text" name="" class="form-control"/>
        </td>
        <td>
            <input type="text" name="" class="form-control" disabled/>
            <a title="Remove" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
        </td>
        <td>
            <input type="text" name="" class="form-control" disabled/>
            <a title="Remove" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
        </td>
        <td>
            <input type="text" name="" class="form-control" disabled/>
            <a title="Remove" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
        </td>
        <td>
            <a title="Remove" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
        </td>
    </tbody>
</table>
htmlcss

Answer №1

You have found what you were searching for.

td .btn {
  position: absolute;
  margin-top: 7px;
  float: right;
  margin-left: 5px;
}
td input {
  float: left;
}
.spacer {
  padding-left: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover">
    <thead class="thead-inverse">
        <th>Clave</th>
        <th>Razón social</th>
        <th>Contacto 1</th>
        <th>Contacto 2</th>
        <th>Contacto 3</th>
        <th></th>
    </thead>
    <tbody>
        <td class="col-md-1">
            <input type="text" name="" class="form-control"/>
        </td>
        <td class="col-md-3">
            <input type="text" name="" class="form-control"/>
        </td>
        <td>
            <input type="text" name="" class="form-control" disabled/>
            <a title="Remove" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
        </td>
        <td class="spacer">
            <input type="text" name="" class="form-control" disabled/>
            <a title="Remove" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
        </td>
        <td class="spacer">
            <input type="text" name="" class="form-control" disabled/>
            <a title="Remove" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
        </td>
        <td class="spacer">
            <a title="Remove" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
        </td>
    </tbody>
</table>

Answer №2

Did you attempt the following:

<span></span>

Here is an alternative CSS approach: 

td {
  white-space: nowrap;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for aligning bootstrap labels in one line while allowing horizontal scrolling within a column in Bootstrap

Check out this code snippet here. <div class="row"> <div class="col-xs-6"> <div class="input-group"> <div type="text" class="form-control"> <span class="label label-default">Default</span> &l ...

htmlcssbootstrap-4

html carousel not updating in popover

I've been attempting to create a popover with a bootstrap carousel, where the carousel items are dynamically generated and appended from a script. Despite my efforts, I have successfully displayed the carousel but struggle to append the items. I' ...

javascripthtmljquerycarouselbootstrap-5

How can I ensure that my Bootstrap 4 column adjusts to its content appropriately?

In the following container, there are two rows: the first row serves as the header, and the second row contains a left navigation bar and main content on the right side. The left nav bar is designed to shrink to the width of the content. By pressing a tog ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4

Issues arising from script tags causing disturbances in CSS

As a newcomer to the world of web design, I recently embarked on a journey with Bootstrap and also started exploring the platform Codepen. However, after working on a project in Codepen and attempting to transfer my code to Sublime, some unexpected changes ...

csstwitter-bootstraphead

tips for aligning figcaption vertically to image within figure

Is there a way to vertically align the text in the figcaption with the image in this figure? Check out an example here: http://jsfiddle.net/YdATG/1/ Here is the HTML code: <section class="links"> <a href="#"> <figure class="grid-pa ...

htmlcssimagealignmentfigure

Using Bootstrap 3 to implement various grid systems within a single website

For a current project I am working on, my goal is to fill the entire .container with 7 columns within my grid system. To achieve this, I plan on adjusting the Less variable (@grid-columns) before compiling a bootstrap.css file at http://getbootstrap.com/cu ...

csstwitter-bootstraptwitter-bootstrap-3

"Learn how to clear an input field using jQuery with this simple guide

I've gone through a few discussions, such as this one and that one, but I'm still struggling to clear the input field after submission. What is the simplest way to achieve this? This is my current approach: $(document).ready(function(){ $(& ...

javascriptjqueryhtml

CSS code that causes the animated photo banner to reset instead of continuously looping back to the first

I followed a tutorial and created this banner using HTML and CSS. However, I encountered an issue where instead of the banner continuing in loops, it keeps resetting. Since we haven't covered JavaScript yet in university, I'm looking for help to ...

htmlcss

Click once to change the element, but it will remain changed and will not revert back no matter how many times you

After the first click displaying "X" and then changing to "O" in my tic-tac-toe JavaScript game, subsequent clicks only show "O", failing to switch back to "X". I am currently working on creating a tic-tac-toe game using JavaScript. Upon the first click, ...

javascripthtml

Unable to retrieve HTML code with PHP's file_get_contents function

I have been trying to retrieve the HTML content of a webpage using the code below: $url = "http://mysmallwebpage.com/"; $html = file_get_contents($url); Unfortunately, it seems that the file_get_contents function is unable to open URLs in certain formats ...

phphtml

Choose Your Price - Price Grids

I need to incorporate two sets of pricing columns into a website. The first set is for regular car cleaning prices, while the second set is for larger cars with slightly higher prices. My idea is to have two buttons at the top – one for regular cars and ...

javascripthtml

How can we stop the navigation submenus (ULs) from appearing as if they are floating?

I've created a navigation bar with an unordered list consisting of smaller unordered lists, each with the class "subnav". When the screen is small, the navigation collapses and the menus stack on top of each other. I want the navigation to maintain i ...

htmlcssnavigationpositionhtml-lists

Guide on showing a toast message labeled as "Busy" using Google Docs extension

Whenever I launch Spreadsheet or Doc add-ons from the respective stores, I notice a dynamic progress toast appearing at the bottom of the window: This feature doesn't seem to be present in my own add-ons, leading me to believe that it is not integrat ...

cssgoogle-apps-scriptgoogle-sheetsgoogle-docs

Send the chosen value from a dropdown menu to a PHP script

<style type="text/css"> form select { display:none; } form select.active { display:block; } </style> <script type="text/javascript"> window.onload = function () { var allElem = document. ...

phpjavascripthtml

CSS Text ellipsis displays only the beginning of each paragraph

I want to add ellipsis to a text, but it keeps including the first line of all paragraphs. What I actually need is for only the first line of the content to have the ellipsis applied. Here is an example of the content: When using websocket to send message ...

javascripthtmljquerycssbootstrap-5

In Google Chrome, the :after element on the left is cleared, while other browsers do not

In an effort to create a button using background images in the :before and :after pseudo-selectors for cross-browser compatibility, an issue arose where only Chrome did not display it correctly (Safari results were unknown). HTML: <div class="btn-cont ...

cssgoogle-chrome

What causes the first button to be clicked and the form to be submitted when the enter key is pressed within a text

Start by opening the javascript console, then place your cursor in the text box and hit enter. What is the reason for the function "baz" being called? How can this behavior be prevented? function foo() { console.log('foo'); } function bar() ...

javascripthtmlforms

Shadow box with arrow/bubble element using CSS

I am looking to add a box shadow around the outline of the bubble below. <div class=speech-bubble-dark></div> .speech-bubble-dark { position: absolute; background: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); border-radius: 0.4em; ...

htmlcss

Identify whether a specific Instagram post is a video by utilizing Python with selenium

Good day, After reviewing the content on this post: () I managed to extract specific data using the following code: likes = driver.execute_script('''return document.getElementsByClassName('Nm9Fw')[0].lastElementChild.getElement ...

javascripthtmlseleniuminstagramscrape

Remove the content located beside an input element

Seeking assistance for a straightforward query: Snippet of code: <span> <input id="elemento_20_1" name="elemento_20_1" class="elemento text" size="2" maxlength="2" value="" type="text"> / <label for="elemento_20_1">DD</label> < ...

javascriptjqueryhtmljquery-selectors