Ways to add multiple form elements within a table row using CSS

As I was creating a Wishlist/Cart table using the HTML table structure, I ran into an issue where I needed to include multiple forms for each table row. However, traditional solutions did not work because adding a form tag within a table structure is not permitted and disrupts the table's layout.

<table>
  <thead>
    <tr>
      <th>1st column</th>
      <th>2nd column</th>
      <th>3rd column</th>
    </tr>
  </thead>
  <tbody>
    <form id="1st_row_form">
      <tr>
        <td><input value="1 1"></td>
        <td><input value="1 2"></td>
        <td><input value="1 3"></td>
      </tr>
    </form>
    <form id="2nd_row_form">
      <tr>
        <td><input value="2 1"></td>
        <td><input value="2 2"></td>
        <td><input value="2 3"></td>
      </tr>
    </form>
  </tbody>
</table>

Alternatively:

<table>
  <thead>
    <tr>
      <th>1st column</th>
      <th>2nd column</th>
      <th>3rd column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <form id="1st_row_form">
        <td><input value="1 1"></td>
        <td><input value="1 2"></td>
        <td><input value="1 3"></td>
      </form>
    </tr>
    <tr>
      <form id="2nd_row_form">
        <td><input value="2 1"></td>
        <td><input value="2 2"></td>
        <td><input value="2 3"></td>
      </form>
    </tr>
  </tbody>
</table>

Answer №1

This CSS table solution has been a game-changer for me:

<div style="display:table;width:100%;">
  <div style="display: table-header-group">
    <div style="display:table-row;">
      <div class="table-cell">First column</div>
      <div class="table-cell">Second column</div>
      <div class="table-cell">Third column</div>
    </div>
  </div>
  <div style="display: table-row-group;">
    <form id="1st_row_form" style="display:table-row;">
      <div class="table-cell"><input value="1 1"></div>
      <div class="table-cell"><input value="1 2"></div>
      <div class="table-cell"><input value="1 3"></div>
    </form>
    <form id="2nd_row_form" style="display:table-row;">
      <div class="table-cell"><input value="2 1"></div>
      <div class="table-cell"><input value="2 2"></div>
      <div class="table-cell"><input value="2 3"></div>
    </form>
  </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

Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags. I have tried using a reset link but it didn&apo ...

Creating dynamic styles with Material-UI's useStyles

Attempting to implement the same logic using material-ui's useStyle feature <div className={'container ' + (state.unlocked ? 'containerUnlocked' : '')}> I thought it might look like this: <div className={`${clas ...

Images in a separate css class will cause other images to move as well

I'm currently facing an issue in my React project where adding padding to some images at the bottom of the page in a separate CSS class is causing the main image at the top of the page to move. Main Image <div className="self--image& ...

How to center a responsive image in a container using Bootstrap

How can I properly center my banner and place the logo above it? Currently, both elements are not centered as desired. View the live version here: http://codepen.io/anon/pen/waYBxB HTML Code: </head> <body> <!-- LOG ...

Expanding Images Using HTML and CSS

I am currently working on a memory card game using HTML, CSS, and JS as part of my practice. You can check out what I have accomplished so far right here: . Upon inspection, you may notice that the images of the question mark and the flipped card are sligh ...

What is the best way to add a vertical line to the left of the selected menu item?

I'm trying to add a vertical line to the left of the active menu item by giving it border-left: 4px and padding-left: 50px;. However, this causes the active link to no longer be positioned below all the other links. Can anyone suggest a different appr ...

Make sure to incorporate "this.id" when implementing addEventListener in JavaScript

What I am trying to achieve is obtaining the id of an element that was created in JavaScript when it is clicked on. Here is an example scenario: var input_check = document.createElement("INPUT"); input_check.id = 1; input_check.type = "check ...

What is the best way to line up a label and a textarea?

Here is how my code currently looks: XXXXX XXXXX Description: XXXXX My desired output is: XXXXX Description: XXXXX XXXXX Sometimes the "Description" field can span multiple lines. Code snippet: < ...

Retrieve a specific child element by clicking on a custom control on the map

I have a container element with three child spans. Using JQuery, I can determine which child was clicked when the container is clicked by utilizing the following function: $('.unitContainer').on('click','span',function(){ ...

Make sure the navigation bar is fixed to the top of the page only

Looking for a solution to stick the navigation menu to the top of the screen only when the screen is wider than 782px. Progress so far: https://jsfiddle.net/ah4ta7xc/1/ Encountering an issue where there is an unintended gap at the top when applying the s ...

What is the process of setting up checkbox events to trigger jQuery functions across different web pages?

Is there a way to implement a checkbox feature in theme.php that can trigger a function in front.php? I want this function to dynamically change the CSS file from default with a white background to blue with a blue background when the checkbox is checked. ...

Ensuring the continuous transmission of data frames is essential for WebSocket communication

Our system utilizes websocket technology to transmit user activity events such as clicks, mouse movement, scroll, input, and more. In addition to these events, we also send a snapshot of the HTML DOM. On average, the size of the HTML snapshot is approximat ...

Rotate the mat-select arrow when the dropdown opens (moving in both upward and downward directions)

Currently, I have a mat-select dropdown icon arrow that toggles facing up or down based on user clicks. However, after selecting an option and closing the dropdown, the arrow remains in the upward position unless further clicked and held. I have attempted ...

Adjust the height of a sibling div using JavaScript with mouseover event

I need assistance with creating an audio visualizer effect where on mouseover, "this" div becomes the tallest one and the other divs adjust their heights accordingly. How can I specify the specific height for each sister div to change to? Code window ...

Issues with browser tab icon disappearing upon being pushed to Github for a Vue project

I'm facing an issue where my browser tab icon is not showing up after I push my repository to GitHub. Interestingly, it shows up perfectly fine when I test it on localhost. On the left is my website hosted on GitHub, while on the right is my website ...

Tips for invoking a function in a div element without relying on *ngIf in Angular 2

When filtering JSON data in a nested loop, I have filters set up in the child loop using ngFor. However, I also need to apply that filter at the parent level in Angular 2. Currently, I am using nglf to call the function and it is working but I am looking ...

Converting JSON information into a mailto hyperlink

Can anyone help me figure out how to encode a mailto link properly with JSON data in the query parameters, ensuring that it works even if the JSON data contains spaces? Let's consider this basic example: var data = { "Test": "Property with spaces" ...

What is the best way to choose a specific div within a container that contains additional HTML elements?

I am facing an issue with selecting the second div tag within a section that contains 2 divs and an img tag. I attempted to use section div:nth-child(2), but it is targeting the second element inside the first div. However, my goal is to select the secon ...

Script tag causing browser to send unwanted request

Recently, I received some code from a third-party supplier to implement on certain web pages. This code utilizes the jQuery plugin for jTemplates and looks something like this: <script type="text/html" id="item_template"> {#foreach $T.search.results ...

Creating multiple tables from a single set of JSON data

I've been working on dynamically creating an HTML table from JSON data. Successfully creating the table dynamically, but now I need to modify it based on new requirements. Current Progress I have an array of objects that I use to create the table a ...