Match the input fields with the corresponding table columns

Could you assist me in adjusting the alignment of my inputs? I am looking to position them above the last two columns ("Primary price" and "Secondary price"). To provide clarity, I have included a wireframe.

https://i.sstatic.net/Zq983.jpg

I attempted to add Bootstrap columns within table cells, but it ended up breaking the entire table. Here is a simplified example:

https://jsfiddle.net/ma7pv408/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010657e607e62">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th class="col-1" scope="col">#</th>
        <th class="col-3" scope="col">Name</th>
        <th class="col-4" scope="col">Primary price</th>
        <th class="col-4" scope="col">Secondary price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="col-1" scope="row">1</th>
        <td class="col-3">Mark</td>
        <td class="col-4">9€</td>
        <td class="col-4">100€</td>
      </tr>
      <tr>
        <th class="col-1" scope="row">2</th>
        <td class="col-3">Jacob</td>
        <td class="col-4">23€</td>
        <td class="col-4">208€</td>
      </tr>
      <tr>
        <th class="col-1" scope="row">3</th>
        <td class="col-3">Larry</td>
        <td class="col-4">21€</td>
        <td class="col-4">90€</td>
      </tr>
    </tbody>
  </table>
</div>

htmlcssbootstrap-4

Answer №1

I have devised a solution to overcome this issue.

To address the problem, simply insert an additional row at the beginning of the table. Since there are 4 cells in the subsequent rows, you will need to include the following code to create a new row:

<tr id='price-row'>
    <td colspan=2>Main Prices</td>
    <td><input id='input1'></td>
    <td><input id='input2'></td>
</tr>

Furthermore, add the following CSS:

#price-row, #price-row td{
    border: none;
}

After that, feel free to implement any other UI modifications as desired. You can access the jsfiddle here.

Remember to remove the <thead> from the table heading to prevent the input boxes from appearing on the second row.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" />

<div class="row">
  <table class="table">
    <tr id='price-row'>
      <td colspan=2>Main Prices</td>
      <td><input id='input1'></td>
      <td><input id='input2'></td>
    </tr>
    <tr>
      <th class="col-1" scope="col">#</th>
      <th class="col-3" scope="col">Name</th>
      <th class="col-4" scope="col">Primary price</th>
      <th class="col-4" scope="col">Secondary price</th>
    </tr>

    <tbody>
      <tr>
        <th class="col-1" scope="row">1</th>
        <td class="col-3">Mark</td>
        <td class="col-4">9€</td>
        <td class="col-4">100€</td>
      </tr>
      <tr>
        <th class="col-1" scope="row">2</th>
        <td class="col-3">Jacob</td>
        <td class="col-4">23€</td>
        <td class="col-4">208€</td>
      </tr>
      <tr>
        <th class="col-1" scope="row">3</th>
        <td class="col-3">Larry</td>
        <td class="col-4">21€</td>
        <td class="col-4">90€</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

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

Alter the border hue of the checkbox and radio button

Is there a way to modify the border color of checkboxes and radio buttons (both circle and rectangle) using CSS? I've attempted several methods with no success. Can someone provide guidance on this? Any advice would be greatly appreciated. Thank you ...

htmlcss

Issues with CSS Min-Height in Various Web Browsers

Lately, I've been working on a website and trying to create a border that surrounds all my content and extends the full length of the page. The #Container div is supposed to expand to fill the entire page. I've tried using min-height:100%; in my ...

htmlcss

Opacity effect on input text when it exceeds the input boundaries

I'm having an issue: I need to create inputs with different states, including when the text is longer than the input itself. In this case, the extra text should fade out with a gradient transparency effect: https://i.sstatic.net/r5qQu.jpg Here is my ...

javascriptjqueryhtmlcss

Selenium raised an exception of type InvalidSelectorException with the message stating that compound class names are not allowed as selectors

Here is the code snippet I am working with: from selenium import webdriver driver = webdriver.Opera(executable_path=r'C:\Users\lolo\Desktop\operadriver_win64\operadriver.exe') driver.get('https://2whois.ru/?t=dns& ...

pythonhtmlpython-3.xseleniumselenium-webdriver

Using Javascript to dynamically flash-highlight text on a webpage when it first loads

I am looking to create a special highlight effect that activates when the page loads on specific text. Let's focus on the element with id="highlight me". The highlight should glow twice around the selected container before fading out. For a clear unde ...

javascripthtmlanimation

Issue with badge counter not functioning properly on Bootstrap button

My Bootstrap button has a badge counter that indicates how many items are linked to it. <a href="{{ route('events.index', ['group_id' => $group->id])}}" class="btn btn-sm btn-primary">Events <span class="badge badge-ligh ...

mysqllaravelbootstrap-4

How to center a container in HTML using Bootstrap techniques

Here is the code I have been working on: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="span4 offset4 centered"> <div class="container overflow-hidden"> < ...

htmlcsstwitter-bootstrapbootstrap-4

The Ajax post is only activated on one occasion

Hello there, I am encountering a problem with an ajax function. My goal is to post data to a database and then update a table that displays the database information. Strangely, the process works fine the first time - data is posted and the table is refresh ...

javascriptphphtmljqueryajax

Display the importance of utilizing Bootstrap 4's range input feature

Is there a way to display the value of a range input in Bootstrap without using Javascript? I found this tutorial but it doesn't show how to do it: https://getbootstrap.com/docs/4.1/components/forms/#range-inputs <div class="container"> < ...

htmlcssbootstrap-4range

Discovering the row that was clicked: A step-by-step guide

Hello, I have created a table using JavaScript and now I am looking to determine the row and column that the user has clicked on. Below is the function I am using to generate the table: function doNextSteps() { removeAustriaFromCountries(); //i ...

javascripthtml

guide on implementing a horizontal scrolling/swipe navbar with Cordova

Currently, I am working on creating a "category list" with multiple items for a Cordova app. The initial approach was to use a simple HTML list, but unfortunately, it seems that my list is causing some unexpected behavior. Desired swipe navbar layout: ht ...

jqueryhtmlcsscordova

Unable to modify the background image of a div using jQuery

I'm encountering an issue in my script where I tried to implement an event that changes the background-image of a div when a button is clicked, but it's not functioning as intended. Below is the code snippet: HTML <div class="col-md-2 image ...

javascripthtmljquerycss

What is the best way to make a scrollable `div` that is the same height as my `iframe` with Material-UI?

I am developing a responsive Video Player with an accompanying playlist designed for Desktop and larger screens. The playlist has the potential to contain a large number of items, possibly in the hundreds. To view my progress so far, please visit https:// ...

htmlcssreactjsresponsive-designmaterial-ui

I successfully managed to ensure that the splash screen is only displayed upon the initial page load. However, I am now encountering an issue where it fails to load again after I close the page. Is there any possible solution

After successfully implementing a splash screen that only plays once on page load, I encountered an issue. When I close the tab and revisit the page, the splash screen no longer plays. Is there a way to fix this problem? Perhaps by setting a time limit for ...

javascripthtmlcsscss-animationssplash-screen

Send two values from a select box when it is chosen

I am currently facing a challenge where I need to retrieve two related values when a select box is changed. The select box is set up to allow multiple selections and contains options that represent user resources, some of which are parent resources. My goa ...

javascriptjqueryhtml

Spacing issues in Bootstrap footer on mobile devices when resizing left and right

Recently, I added a new footer to my Twitter Bootstrap website and noticed that when I resize the window, gaps appear on the left and right sides. I understand that this issue is related to the following CSS code... @media (max-width: 767px) { body { ...

htmlcsstwitter-bootstrap

The functionality of the Jquery mobile panel ceases to work properly when navigating between pages within a multi-page

Within a multi-page template setup in a jQuery mobile application, an issue arises after navigating away from the first page using panel navigation. Upon returning to the first page through another form of navigation, the panel appears "hanged." Upon clos ...

javascripthtmljquery-mobilemobile

PHP code fails to set a hidden element within a form array

My current project involves sifting through a modest PHP application to debug and enhance it. One snag I've come across is that what should be updates are instead treated as deletes and inserts. To rectify this, I've made some adjustments. Speci ...

phphtml

Unusual problem arises with the positioning of widgets in Blogspot due to the use of CSS `position

Recently, I implemented a new widget on my blog called , which functions as a menu using the "Add HTML/Script" feature. Below is the HTML/CSS code for the widget: .menukadn { line-height: 1; } a.limeka, a.limeka:visited, a.limeka:active { font-family: ...

cssgoogle-chromewidgetbloggercss-position

Choosing the Following Date from the Datepicker using Selenium IDE

I need the selenium IDE test case to automatically select a date following the steps outlined below: Start by clicking on the departure date to open the datepicker Loop through the dates starting with the currently selected day until the next available d ...

javascripthtmlseleniumautomationautomated-tests