What is the best way to place two input fields side by side within a table cell so that they each occupy 50% of the width?

Looking for some table help here:

<table>
  <tr>
    <td>
      <input type="text" class="half"/>
      <input type="text" class="half" />
    </td>
    <td>
      <input type="text"/>
    </td>
    <td>
      <input type="text"/>
    </td>
  </tr>
</table>

CSS:

table {
  width: 100%;
  border-spacing: 0;
}

.half {
   float: left;
   width: 50%;
}

Any ideas on how to get two input fields beside each other filling up half of the natural width of a table cell?

Struggling with this as currently, the input fields in the cells are too wide and I can't figure out why.

htmlcss

Answer №1

To achieve optimal styling, there are two key steps to follow: DEMO

  1. Eliminate white space between inline-block elements by removing the float property.
  2. Take border size into account when setting element widths.

Firstly, remove white space from your HTML code by minimizing it like this:

<input ... /><input  ... />

Secondly, consider switching to the box-sizing:border-box model for more control:

box-sizing:border-box;

Remember to add vendor prefixes if necessary.

Answer №2

Have you considered adding the class .half to the parent element <td>?

<td class="half">
  <input type="text" />
  <input type="text" />
</td>

Answer №3

Have you considered this layout for your table design?

<table border="2px">
  <tr>
    <td>
      <input type="text" class= "half"/>
      <input type="text" class= "half"/>
    </td>
    <td>
      <input type="text"/>
    </td>
    <td>
      <input type="text"/>
    </td>
  </tr>
</table>

Here is the corresponding CSS:

table {
  width: 100%;
  border-spacing: 0;

}
td{
padding-left: 5px;

}

.half {
   float: left;
   width: 49%;
   margin: 2px;
}

Answer №4

To quickly solve this issue, try wrapping the inputs in a span tag. Make sure to set the span to display as inline-block with a width of 50%, and set the inputs to have a width of 100%. This will help maintain the inputs within the table cell using the box model.

   http://jsfiddle.net/HgxFf/
 <table>
 <tr>
    <td>
        <span><input type="text" class="half"/></span>
        <span><input type="text" class="half" /></span>
    </td>
    <td>
      <input type="text"/><input type="text"/>
    </td>
    <td>
        <span><input type="text"/></span>
    </td>
  </tr>
</table>

CSS

table {
  width: 100%;
  border-spacing: 0;
}

td{border:1px solid #000000;font-size:0px; }

span{
    display:inline-block;
    width:50%;
    padding:0px
}

.half {
   width: 100%;
}

input[type="text"]{
    box-sizing:border-box;
}
}

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

An error occurs when attempting to echo empty values from an array due to the "undefined index" issue being

Answering this question seems quite straightforward. Let me outline what needs to be done. I possess an array $polarity_array The array holds values in the form of HTML tags that present images. However, there are some empty values in the array because ...

phphtmlarrays

From Button to Picture Button

Having an issue with my dropdown menu. After selecting a location, clicking on the "go" button should direct me to another page. Here is the HTML code for the button: <input type="button" name="button" class="gobutton" onclick="openDir(this.form);"> ...

htmlimagebutton

The act of searching for items within a table is interfering with the pagination of the table

My table divides its items into 20 lines each and includes a search input above it to filter items based on written words. Each tool works fine independently - I can easily navigate through multiple pages when there are more than 20 items, and I can find s ...

javascripthtmljqueryreactjs

Error Alert: JQuery Pop Up Issue

Struggling with getting my JQuery Pop-Up Box to work properly. Any guidance for a newbie like me on how to fix it would be greatly appreciated. Here's the code I've been working on: <!-- POP UP HTML --> <div class="infocontainer"> ...

javascriptjqueryhtmlcsspopup

Implementing user-selected sqlite statements in PHP through a select form: a guide

I've been experimenting with using the $_POST method to retrieve form data and run a SQLite select statement, but I keep encountering an error that says "Notice: Object of class SQLite3 could not be converted to int". Would switching to a $_GET method ...

phphtmlsqlite

Ways to adjust a column width to be equal to the full width

My HTML table has columns with fixed widths, except for one that I want to expand to fill the remaining space with a minimum width set. I attempted using width: auto, but it didn't achieve the desired result of filling the leftover space. ...

htmlcss

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

After moving from bootstrap 3 to bootstrap 4, my items no longer align properly. I've scoured the entire Internet for a solution, but I've run out of options (and patience.. haha) This is how it currently looks: https://i.sstatic.net/ra22j.png ...

csstypescriptreact-reduxbootstrap-4

Personalizing the Navigation Bar

I am in the process of designing the navigation bar for my website that will work seamlessly on both desktop and mobile devices. To view my progress so far, check out this JS Fiddle link Here is the HTML code I have created: <div class="container-flu ...

htmlcssbootstrap-4

What is the best way to prevent an HTMLCollection from automatically updating?

Is there a way to prevent the HTMLCollection from being live? var cells = someTable.getElementsByTagName('td'); I noticed that it's a live collection, so when I add a new td to the table, the cells length increases by 1. How can I make it ...

javascripthtml

Having trouble displaying the HTML page in Django? Encountering a NoReverseMatch Error?

I have successfully created and integrated a django app into my project. Now, I am attempting to include another HTML page titled "About" to the existing setup. I have added the about page within the home app. View image of code snippet here Below is the ...

htmldjangodjango-templates

Ensure that the click event is triggered only once for each distinct class

Is there a way to make a click event trigger on any element with the same class just once? I attempted using '.one', however, it removes itself after the first element with the class is clicked. $(document).ready(function() { $(".dro ...

javascriptphphtmljqueryajax

Implement jQuery to close multiple div elements

My dilemma involves a series of divs with different manufacturer IDs listed as follows: manufacturer[1], manufacturer[2], manufacturer[3], ... etc ... In attempting to create a JavaScript for loop to hide each div, I discovered that it was not achievab ...

javascriptjqueryhtmlcss

Hide the text if there is not enough space to show it fully

Currently working on a website where quotes are featured within a specific section. I am seeking a solution for ensuring that if the text cannot be fully displayed within the div (leading to words being cut off), the entire div becomes invisible. I would ...

cssoverflow

Why is Bootstrap 4 causing these columns to stack vertically instead of horizontally?

After upgrading to bootstrap 4, I noticed that my gallery layout has changed from horizontal in bootstrap 3 to vertical. What could have caused this sudden change? To see the issue, here is a link to a fiddle. Here are my column settings: <div class= ...

csstwitter-bootstrapbootstrap-4

What is the most expedient method to refresh blog content upon detecting a change?

I am interested in developing a blog that is extremely user-friendly and would like to find the most effective method for displaying recent blog posts. One approach could involve programmatically refreshing a div every 5 seconds or sending a request every ...

phpjavascripthtmlnode.jscomet

Tips for removing a particular slide from bootstrap carousel with JQuery

I'm a beginner when it comes to bootstrap. I have a Carousel with some slides that include a Decline button. When the button is clicked, I want to delete/remove that slide and move on to the next one. Can this be achieved using JQuery? I've been ...

jquerycsstwitter-bootstrap

Displaying line breaks <br> on the browser when there are characters stored in the database

Within my mongo database, there is a document containing a field called reviewText: 'this is line 1\nthis is line 2',. This text was entered by a user in a textarea, hence the presence of \n to represent line breaks. I want to display t ...

javascripthtmlmongodbexpressejs

Script written in PHP to retrieve text from a website, then translate and save it onto a local storage

Is there a way to save text from a website to a local file? The script should perform the following actions: Visit this website (fake site) http://website/webtv/secure?url=http://streamserver.net/channel/channel.m3u8**&TIMESTAMP** where TIMESTAMP ...

javascriptphphtml

Z-index problem occurring with rotateY on Safari and Chrome Mobile

https://jsfiddle.net/nxbg7rq3/ I've been struggling to get the .mask completely on top of the .screen in this example. It works fine in most browsers, but Safari and Chrome Mobile are giving me a hard time. I've experimented with various solutio ...

htmlcsssafaritransform

Turn off automatic resizing of iframes

I'm currently dealing with a webpage that contains an iframe. The iframe contains quite a bit of data, and every time it loads, its height adjusts to match the content within. Unfortunately, this is causing my page layout to be disrupted. Is there a w ...

htmlcssiframescroll