Tips on placing two tags within one cell in a HTML Bootstrap table

I am a beginner in html and bootstrap, and I am trying to create a table. However, I noticed that the input fields are not aligning properly within the cells. Even when I tried adjusting the width to 100%, the % sign ended up on a separate row. Can anyone help me figure out what I am missing?

<div class="card">
 <table class="table table-bordered table-condensed table-clean table-p-0 table-v-middle">
    <thead>
        <tr>
            <th class="col-lg-3">Inventory Type</th>
            <th class="col-lg-3">CTV (App)</th>
            <th class="col-lg-3">App (Mobile)</th>
            <th class="col-lg-3">Site (Desktop,Mobile))</th>
       </tr>
    </thead>
    <tbody>
        <tr>
           <td>Open Market</td>
           <td class="d-flex">
             <!-- CTV -->
             <span class="table-control-addon-right">%</span>
             <input type="number" class="w-100" step="0.1" max="100">
           </td>
           <!--  App -->
           <td class="d-flex">
             <span class="table-control-addon-right">%</span>
             <input type="number" class="w-100" step="0.1" max="100">
           </td>
           <!--  SITE -->
           <td class="d-flex">
             <span class="table-control-addon-right">%</span>
             <input type="number" class="w-100" step="0.1" max="100">
           </td>

        </tr>
        <tr>
           <td>PMP</td>
           <td class="d-flex">
             <!-- CTV -->
             <span class="table-control-addon-right">%</span>
             <input type="number" class="w-100" step="0.1" max="100">
           </td>
           <!--  App -->
           <td class="d-flex">
             <span class="table-control-addon-right">%</span>
             <input type="number" class="w-100" step="0.1" max="100">
           </td>
           <!--  SITE -->
           <td class="d-flex">
             <span class="table-control-addon-right">%</span>
             <input type="number" class="w-100" step="0.1" max="100">
           </td>
        </tr>
    </tbody>
 </table>
</div>

If you're also struggling with aligning the input field and the % sign on the same row, check out this solution:

https://i.sstatic.net/4ZQUK.png

This particular method has helped solve the issue:

   <td>Open Market</td>
   <td class="d-flex flex-row-reverse">
     <!-- CTV -->
     <div class="d-flex" style="display: flex;">        <!-- need to add display flex -->
        <input type="number" class="w-100"  step="0.1"  max="100" style="border:none;">  <!-- need to add boarder none -->
        <span class="table-control-addon-right">%</span>
     </div>
   </td>
htmlcssformsbootstrap-4

Answer №1

<input type="number" class="w-100" step="0.1" max="100">

<td class="d-flex">
             <!-- CTV -->
             <span class="table-control-addon-right">%</span>
             <input type="number table-control p-l-20" step="0.1" class="w-100" max="100">
           </td>

simply assign the class "w-100" to your input element

Answer №2

After troubleshooting, the solution to the issue was found. It involved adding a div tag before the input field and applying display flex style to the div while removing the border from the input.

<td>Open Market</td>
<td class="d-flex flex-row-reverse">
<!-- CTV -->
<div class="d-flex" style="display: flex;">        <!-- need to add display flex -->
<input type="number" class="w-100"  step="0.1"  max="100" style="border:none;">  <!-- need to add boarder none -->
<span class="table-control-addon-right">%</span>
</div>
</td>

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

Creating a dynamic navigation bar that adjusts to changing content requires careful planning and implementation

Struggling with achieving my visual mockup while designing a webpage: Check out my web design mockup Currently focusing on section 2 of the page. Using Angular 5, Bootstrap 3, and ngx-bootstrap library to integrate Bootstrap components into Angular. Here ...

htmlcssangulartwitter-bootstraptwitter-bootstrap-3

Issue with Bootstrap dropdown menu not closing correctly when clicked on mobile devices

On my Bootstrap website, I have a mobile menu that looks like this: <a class="nav-link" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-auto-close="true"> Rent Costumes ...

htmljquerycssbootstrap-4drop-down-menu

Issue with SVG on tainted canvas causes IE security error when using toDataURL

In my Angular JS directive, I have implemented a feature to export SVGs to PNG. While this functionality works seamlessly in most browsers, it encounters a security error in IE. Despite my numerous attempts to troubleshoot the issue, I have been unable to ...

javascriptangularjshtmlcanvassvg

Selecting CSS Properties with jQuery

I am trying to make an image change color to blue and also change the background color to blue when it is clicked inside a div. However, my code doesn't seem to be working as expected. Is there a more efficient way to apply CSS to elements? FIDDLE v ...

jquerycss

best practices for transferring object data to a table with ng-repeat

I have an object called 'SEG-Data with the following structure. I am attempting to display this data in a table using ng-repeat. SEG_Data Object {ImportValues: Array[2]} ImportValues: Array[2] 0: Object ImportArray: "004 ...

javascripthtmlangularjsangularjs-ng-repeat

What could be the reason my black overlay doesn't show up when the button is clicked?

Attempting to craft a pop-up window on my own, I encountered an issue. Upon pressing the button, instead of the anticipated pop-up appearing and darkening the background below it, the entire page freezes with no sign of the pop-up box. If I eliminate the ...

javascriptjqueryhtmlcss

Integrating Contact Form with PhoneGap API using JavaScript and HTML5

I am currently working on building a contact form using the PhoneGap API integrated with JavaScript and HTML5 for the form design. The contact form I am creating should allow me to add new contacts and search for existing ones. To achieve this, I have been ...

javascripthtmlcordova

Tips for dividing the AJAX response HTML using jQuery

I have a piece of code that is functioning properly. However, I am having trouble splitting the HTML response using AJAX jQuery. I need to split it into #div1 and #div2 by using "|". Could you please provide a complete code example and explanation, as I am ...

javascriptphpjqueryhtmlajax

Tips for preventing the ng-click event of a table row from being triggered when you specifically want to activate the ng-click event of a checkbox

So, I've got this situation where when clicking on a Table Row, it opens a modal thanks to ng-click. <tr ng-repeat="cpPortfolioItem in cpPortfolioTitles" ng-click="viewIndividualDetailsByTitle(cpPortfolioItem)"> But now, there&apos ...

javascriptjqueryhtmlangularjscheckbox

I am eager to create a vibrant striped table using React.js, making use of the map function

Using the map function to display fetched device data, but struggling to create a striped color table. I want to alternate the background color of the tbody tag in stripes, using Bootstrap. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXX ...

cssreactjs

What is the method for inserting a horizontal line in Bootstrap?

Is there a way to incorporate a horizontal line between my div elements? Below is the script I am currently working with. Div("Name", css_class='col-sm-12'), Div("Address", css_class='col-sm-6'), Div("Favorit ...

djangobootstrap-4django-crispy-formsform-helpers

One way to trigger the same modal to open when clicking on a shared class using jQuery

I need some assistance with opening a model upon clicking the same link. Currently, when I click on the link, only the backdrop briefly appears and then the page reloads. Any help would be greatly appreciated. Thank you in advance. Below is the code snipp ...

jqueryhtmltwitter-bootstrap

Shift the "Login link" to the right side of the Bootstrap navbar

Currently working on a Django website and incorporating Bootstrap/CSS/HTML to enhance the design. I've set up a navbar menu and want the login tab on the right side. However, despite my attempts, I'm not achieving the desired outcome: The HTML ...

htmlcssdjangotwitter-bootstrapnavbar

What is the method for altering the color of the webkit-slider-thumb using JavaScript?

I am looking to adjust the color of an input range using JavaScript instead of CSS. Can someone help me with this request? Current CSS Code: input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: goldenrod !importa ...

javascripthtmlcss

Associate the ng-model with ng-options value and label

I'm currently using ng-options to create a select tag that displays location options. The labels represent the location names, while the values indicate the corresponding location ID as stored in the database. In addition to binding the value (locati ...

javascripthtmlangularjsangular-ngmodelng-options

CSS opacity is currently not working as intended

Why doesn't the opacity work here? I've tried using hex and rgba colors, but nothing changes. Even adding classes to tr and td didn't help... First attempt: .done{ background-color: rgba(0,175,51,5); color:white; opacity: 50; ...

htmlcss

The ul element is not being properly styled by the CSS pseudoclass :checked

I recently attempted to create a responsive navigation bar using a YouTube tutorial that utilizes a checkbox to display and hide the menu on smaller screens. Despite meticulously following the tutorial and testing different browsers such as Chrome, Edge, a ...

htmlcssliveserver

Determine if a certain value is present in an array within an HTML document

In the context of AngularJS, I have an array that looks like this: var test=["abc/1/1","def/2/2","efg/3/3"]; I am trying to determine if the array contains a value with "abc" in it within my HTML code. When I used the following: test.indexOf("abc")!=-1 ...

htmlangularjs

Incorporating HTML content in email messages using a PHP mailer script

I have been exploring a way to incorporate HTML code into the email body using an AJAX PHP Form Mailer I discovered on this website: However, whenever I try to add my own HTML coding into the email body, it just displays the tags instead of rendering them ...

phphtmlcssajaxemail

Mobile responsiveness issue with basic bootstrap navigation bar not collapsing

After trying everything possible, I am still unable to resolve my issue and it is leaving me puzzled. MY ISSUE Simplifying my page, I used the example from w3schools for a responsive navbar. When resizing the browser window, the navbar collapses correctl ...

jquerycsshtmltwitter-bootstrap