Tips for adjusting the width of a column that includes an input field

I attempted to create a table where the first column takes up 40% of the total width, with the remaining columns each occupying 10%. However, all my columns ended up being the same width.

<table >
<col style="width:40%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<thead>
    <tr>
        <th>head 1</th>
        <th>head 2</th>
        <th>head 3</th>
        <th>head 4</th>
        <th>head 5</th>
        <th>head 6</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
    </tr>
</tbody>

</table>
htmlcss

Answer №1

Simply include the rule below: input { width: 100%; }

Check out the FIDDLE

th {
  border: 1px solid red;
}
input {
  width: 100%;
}
<table border=1>
  <col style="width:40%">
    <col style="width:10%">
      <col style="width:10%">
        <col style="width:10%">
          <col style="width:10%">
            <col style="width:10%">
              <col style="width:10%">
                <thead>
                  <tr>
                    <th>head 1</th>
                    <th>head 2</th>
                    <th>head 3</th>
                    <th>head 4</th>
                    <th>head 5</th>
                    <th>head 6</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                  </tr>
                </tbody>

</table>

Answer №2

Check out this demo - http://jsfiddle.net/yr74u957/4/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
th {
  border: 1px solid red;
}
table {
  width: 100%;
  table-layout: fixed;
}
table th {
  width: 10%;
}
table th input {
  width: 100%;
  border: 1px solid blue;
}
table th:first-child {
  width: 40%;
}
<table border=1>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
      <th>head 5</th>
      <th>head 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
    </tr>
  </tbody>
</table>

Answer №3

The td element has a specified width, but the table it belongs to does not have a set width. To ensure proper functionality, include the following code:

table {
    table-layout: fixed;
    width:100%;
}

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

Ways to incorporate additional spacing within a code section using HTML and CSS

I am in the process of creating a new widget. To implement it, users will need to copy and paste a code snippet from my website directly into their HTML code. There are two main functionalities that I want to incorporate: I would like to include proper ...

htmlcssreactjs

Showing JSON information on a web page

I'm currently working on a Hybrid App using the intel XDK platform. In my app, I have set up ajax requests to communicate with my PHP server, which responds with JSON data. Here is an example of the JSON data received from the server: [{ "id":"11", ...

phpjqueryhtmljsonhybrid-mobile-app

Is it possible to implement a unique style exclusively for my application's components?

Recently, I've been trying to apply a universal style rule to my entire app similar to this: div { width: 100%; } At first, everything seemed to be working perfectly. However, when I began integrating third-party components that have their ow ...

cssstyled-componentsshadow-dom

JQuery Submission with Multiple Forms

Hey everyone! I have a jQuery form with multiple fieldsets that switch between each other using jQuery. Eventually, it leads to a submit button. Can someone assist me by editing my jfiddle or providing code on how I can submit this data using JavaScript, j ...

javascriptjqueryhtmlajax

Is there a way to restrict access to a website on Chrome using HTML code?

I'm trying to block a website on Chrome using HTML. When I try, a pop-up appears. If I click OK, the site is blocked, but if I click cancel, it continues to load. How can I resolve this issue? See below for the code and screenshot: <html& ...

htmlcss

How can I display videos inline using php and html?

I'm having an issue with my HTML and PHP code. The videos are showing up in a vertical line, even though I used inline-block in the CSS code. Can someone please help me out? I'm new to this and struggling. HTML Code: <div class="wrap"> &l ...

phphtmlcss

A groundbreaking algorithm engineered to launch a sequence of distinct hyperlinks upon each button press

I have a unique script that allows me to open links randomly, but now I want to create a new script that opens links sequentially and goes back to the initial one. For example, clicking a button will open link1, then clicking it again will open link2, an ...

javascripthtmlweb

Using Responsive Design with Bootstrap and Media Queries

As a beginner in front-end development, I have recently learned about media queries and their functionality. Having previously studied Bootstrap, I can't help but wonder if media queries are actually necessary. After all, Bootstrap seems to offer simi ...

csstwitter-bootstrapwebfrontendmedia-player

Preserving form data using JavaScript exclusively upon submission

Hey there! I'm facing a little issue with a Form that has multiple checkboxes and a piece of JavaScript code designed to save the state of each checkbox when the user hits submit. My problem is that, currently, the checkbox state is being saved even i ...

phpjavascriptjqueryhtmlforms

Embedding a YouTube video in a view player using HTML5

So I've got a question: can you actually open a youtube video using an HTML5 video player? I'm looking for a more mobile-friendly way to watch youtube videos, and my idea was to upload a thumbnail image and then set up an onclick function to disp ...

javascriptandroidhtmlvideoyoutube

Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", an ...

csstwitter-bootstrap-4

A Firefox Browser View of a Next.js and Tailwind Website magnified for closer inspection

After creating a website using Next.js and Tailwind CSS, I noticed that the site is appearing zoomed in when viewed in Firefox. However, it looks fine in all other browsers. When I adjust the screen to 80%, the website displays correctly in Firefox. What ...

javascripthtmlcssreactjsnext.js

align the button to the same location as the other element

I'm currently working with an HTML layout that features a two-column structure. The code snippet below highlights this setup: <div class="card-body"> <div class="row"> <div class="col-md-10"> ...

htmlcsstwitter-bootstrapbootstrap-5

Creating a dynamic navigation bar featuring an interactive search option

I am currently working on creating a responsive navigation bar with bootstrap, similar to the one shown in this example. However, I am facing issues with aligning the search button correctly and ensuring that the tabs remain intact when collapsed. Instead ...

jqueryhtmlcsswordpresstwitter-bootstrap

What is the best way to activate a function to control animation transitions?

My goal is to manually control transitions in my HTML using JavaScript code, such as a tween library like TweenMax. Instead of relying on CSS for transitions with classes like .ng-enter, I want to target a JavaScript function: function onEnter() { /* tra ...

javascripthtmlangularjsanimationtween

What is the best way to combine table cells in HTML to create a "T" shape?

Is there a way to merge the two blank cells (one above 'Be' and one above 'B') with a large blank space in the middle? I attempted using colspan and rowspan in various ways without success. https://i.stack.imgur.com/tw5SE.png This is m ...

htmlmergehtml-table

New feature in Bootstrap 5: Fixed navigation with smooth scroll effect

Recently, I made the switch from Bootstrap 4 to Bootstrap 5 for my template. Surprisingly, I didn't encounter this issue with Bootstrap 4. Initially, I suspected that adding a flex container inside the navbar might be causing the problem, but that doe ...

htmlcssbootstrap-5

Display various sets of data from multiple models within a single view

My project is focused on Asp.net Mvc and I am encountering a challenge in displaying multiple model data in one view. However, I do not want to showcase it in a list or grid format, instead, I prefer a Form View style. The two modal classes involved are Pr ...

htmlrazormodel-view-controllerviewmodel

How to Change Text When Accordion is Expanded or Collapsed using Javascript

Help needed with JavaScript accordion menu for displaying indicators in front of section headers. The goal is to show a (+) when collapsed and (-) when expanded. The current code only changes on click, not based on the section's state. Looking for fre ...

javascriptcssaccordion

Issue with child div not properly fitting inside parent div

I am working with three different divs in my code. There is one parent div and two child divs. The styling for the parent div looks like this: #parent { overflow:auto; margin: 0 auto; margin-top:37px; min-height: 100%; width:875px; } Now, let ...

csshtml