Issues with Bootstrap Table Column Widths not Adjusting Properly

I am facing an issue with my Bootstrap 4 table where the fixed column widths specified in the header row are not being respected when the table is rendered. The Time column, for example, should only be 5% of the width but it is taking up more space than expected.

Below is a snippet of the code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/8.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/8.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.9.1/jquery.min.js"></script>
<table class="table table-striped table-hover table-bordered">
  <thead>
    <tr>
      <th style="width:20%">No</th>
      <th style="width:30%">Name</th>
      <th style="width:5%">Phase</th>
      <th style="width:15%">Name</th>
      <th style="width:5%">Day</th>
      <th style="width:5%">Time</th>
      <th style="width:5%">Totals</th>
      <th style="width:10%">Notes</th>
      <th style="width:5%">Action</th>
    </tr>
  </thead>
  <tbody>

    <tr id="1956253">
      <td>2368941257</td>
      <td>London Gateway</td>
      <td>23/B</td>
      <td>Planning</td>
      <td>Mon</td>
      <td>7</td>
      <td>7</td>
      <td>lorem ipsum</td>
      <td>N/A</td>
    </tr>



    <tr>
      <td>
        <select name="projectNumber" required>
          <option value=""></option>
          <option value="365541254">365541254</option>
          <option value="874521147">874521147</option>
          <option value="3456467456">3456467456</option>
        </select>
      </td>
      <td id="ProjectName"></td>
      <td id="ProjectPhases"></td>
      <td></td>
      <td>
        <select name="Date" required>
          <option value=""></option>
          <option value="Mon">Mon</option>
          <option value="Tue">Tue</option>
          <option value="Wed">Wed</option>
          <option value="Thu">Thu</option>
          <option value="Fri">Fri</option>
          <option value="Sat">Sat</option>
          <option value="Sun">Sun</option>
        </select>
      </td>
      <td><input type="text" name="Time" required></td>
      <td></td>
      <td><input type="text" name="Notes"></td>
      <td></td>
    </tr>

    <tr>
      <td colspan="9">
        <button type="reset" class="btn">Reset</button>
        <button type="submit" class="btn btn-success">Save</button>
      </td>
    </tr>

  </tbody>
</table>

I have tried various solutions to fix the column width issue but none seem to work. Any advice or guidance would be greatly appreciated.

javascripthtmlcssbootstrap-4

Answer №1

When setting widths for columns in a table, make sure to apply them consistently across the th and tr elements. Also, consider adjusting input field sizes within cells to prevent columns from expanding unnecessarily.

To streamline your styling, you can create specific classes for different column widths to organize your CSS more efficiently.

Take a look at the demo provided:

.w-5{
  width: 5%;
}

.w-10
  width: 10%;
}

.w-15{
  width: 15%;
}

.w-20{
  width: 20%;
}

.w-30{
  width: 30%;
}

.w-5 input{
  width:100%;
}

.w-20 select{
  width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-hover table-bordered">
  <thead>
    <tr>
      <th class="w-20">No</th>
      <th class="w-10">Name</th>
      <th class="w-5">Phase</th>
      <th class="w-15">Name</th>
      <th class="w-5">Day</th>
      <th class="w-5">Time</th>
      <th class="w-5">Totals</th>
      <th class="w-10">Notes</th>
      <th class="w-5">Action</th>
    </tr>
  </thead>
  <tbody>

    <tr id="1956253">
      <td>2368941257</td>
      <td>London Gateway</td>
      <td>23/B</td>
      <td>Planning</td>
      <td>Mon</td>
      <td>7</td>
      <td>7</td>
      <td>lorem ipsum</td>
      <td>N/A</td>
    </tr>



    <tr>
      <td class="w-20">
        <select name="projectNumber" required>
          <option value=""></option>
          <option value="365541254">365541254</option>
          <option value="874521147">874521147</option>
          <option value="3456467456">3456467456</option>
        </select>
      </td>
      <td id="ProjectName"></td>
      <td id="ProjectPhases"></td>
      <td></td>
      <td>
        <select name="Date" required>
          <option value=""></option>
          <option value="Mon">Mon</option>
          <option value="Tue">Tue</option>
          <option value="Wed">Wed</option>
          <option value="Thu">Thu</option>
          <option value="Fri">Fri</option>
          <option value="Sat">Sat</option>
          <option value="Sun">Sun</option>
        </select>
      </td>
      <td class="w-5"><input class="time" type="text" name="Time" required></td>
      <td></td>
      <td><input type="text" name="Notes"></td>
      <td></td>
    </tr>

    <tr>
      <td colspan="9">
        <button type="reset" class="btn">Reset</button>
        <button type="submit" class="btn btn-success">Save</button>
      </td>
    </tr>

  </tbody>
</table>

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

Replace a string in an array using JavaScript

I may be overlooking something very obvious, but here is my dilemma. I am trying to convert [ 'hr' ] into [ '* * *' ]. This is what I tried: var hr = jsonml[i] console.log(hr) // outputs: [ 'hr' ] hr.replace(/hr/g, '* * ...

javascriptarrays

I have a slight confusion when it comes to using HTML frames

Currently, I am in the process of creating a static webpage for an online bookshop. The layout is divided into three frames: top left, and right, each serving a specific purpose. The top frame contains the title, the left frame displays all available boo ...

html

One CSS file linked, but only one is applied; the other is left unused

After including two CSS files, I am experiencing an issue where only one of them is being utilized. The other file does not seem to be included and the reason behind this remains unknown. My website has a standard header file that is present on all pages. ...

css

Having trouble with webpack displaying CSS background images?

I've set up the html boilerplate using webpack. I'm currently encountering an issue where calling an image in my scss file like "background: url('/img/img.png');" isn't working. I've included the webpack file and folder struct ...

javascripthtmlcsswebpack

tips for concealing a row in the mui data grid

I am working on a data grid using MUI and I have a specific requirement to hide certain rows based on a condition in one of the columns. The issue is that while there are props available for hiding columns, such as hide there doesn't seem to be an eq ...

javascriptreactjstypescriptmaterial-ui

Is there a specific index range in javascript or nodejs for accessing array items?

I recently came across this Ruby code snippet: module Plutus TAX_RATES = { (0..18_200) => { base_tax_amount: 0, tax_rate: 0 }, (18_201..37_000) => { base_tax_amount: 0, tax_rate: 0.19 }, (37_001..80_0 ...

javascriptnode.js

html form submission error - please refresh

After submitting a form on my page, I keep encountering an error every time I try to refresh the page. I've attempted several solutions that I came across online, but none of them have resolved the issue as I continue to face this error on different ...

javascriptjqueryhtml

Is it possible to incorporate a selection box along with the Raycaster in Three.js?

In my GLTF scene, I have been exploring the use of the example selection box (code) to select multiple meshes. Unfortunately, the current approach is providing inaccurate results as it selects based on the centroid of each mesh and includes meshes that ar ...

javascriptthree.jsraycasting

Using jquery to refresh several backgrounds at once

While I have some knowledge of CSS and various JavaScript libraries, I've encountered difficulty in integrating multiple backgrounds into the code that I found on this link: http://codepen.io/quasimondo/pen/lDdrF. My goal was to overlay a transparent ...

jqueryhtmlcss

Master the art of keeping track in just a single line

I need to ensure these tabs stay in a single line and remain responsive for mobile devices. Below is the code snippet: <div class="navbar"> <div class="navbar-inner"> <ul class="nav nav-tabs"> <li class="active"& ...

htmltwitter-bootstrap

Using `preventDefault()` does not stop the action from occurring

Whenever I apply event.preventDefault() to a link, it works perfectly fine. But when I do the same for a button, it doesn't seem to have any effect! Check out the DEMO This is the code snippet in question: <a id="link" href="http://www.google.co ...

javascriptjqueryjquery-events

Using jQuery to validate the existence of a link

Within my pagination div, I have links to the previous page and next page. The link to the previous page is structured as follows: <span id="previous"><a href="www.site.com/page/1" >Previous</a>. However, on the first page, there will be ...

javascriptjqueryhtmlcss

Sending JSON-encoded data using HTML5 Server-Sent Events (SSE) is a

I have a script that triggers an SSE event to fetch json encoded data from online.php. After some research, I discovered methods for sending JSON data via SSE by adding line breaks. My question is how to send JSON through SSE when the JSON array is genera ...

javascriptphpjsonhtml

Understanding Mongodb: the process of populating a schema that is referenced within another schema using an API

Looking to make adjustments to my Api in order to populate a referenced schema. Here's the schema I am working with: export const taskSchema = new Schema ({ user:{ type: String, required: true }, project: { type ...

javascriptmongodbtypescriptexpressschema

Utilize a function within styled-components

I am looking to dynamically adjust the font size of a button based on the length of a passed-in prop. However, I can't use a dynamic width due to a custom animation applied to the component. Here is my current code: const checkLength = () => { i ...

cssreactjsstyled-components

Identify all td inputs within a TR element using jQuery

Is there a way to retrieve all the input values within each table cell (td) of a table row (tr) using jQuery? Suppose I have a tr with multiple td elements, and some of these tds contain inputs or select elements. How can I extract the values from these in ...

javascriptjquery

What are the ways to ensure my query columns fill the entire page space?

Currently, when I execute a query, it retrieves the correct information. However, I want to make my columns span across the entire page instead of being centered in the middle with empty space on the sides. Is there a way to expand the columns? Below is t ...

phphtmlcssmultiple-columnsspace

Analyzing the audio frequency of a song from an mp3 file with the help of HTML5 web audio API

Currently, I am utilizing the capabilities of the HTML5 web audio API to detect when a song's average sound frequency drops below a specific threshold and create corresponding markers. Although I have successfully implemented this using AudioNodes, th ...

javascripthtmlaudiomp3arraybuffer

Ways to identify when the scroll bar reaches the end of the modal dialog box

I have been working on a modal that should display an alert when the scrollbar reaches the bottom. Despite my efforts to research a solution, I am struggling to detect this specific event within the modal. The desired outcome is for an alert to pop up once ...

javascripthtmljquerycssscrollbar

Exploring the process of iterating through arrays within an object in vue.js using the v-for directive

Is there a way to iterate through an output object using the v-for template in Vue.js? new Vue({ el: app, data: { output: { player: [1, 5, 61, 98, 15, 315, 154, 65], monster: [14, 165, 113, 19, 22], }, }, }); <script src= ...

javascriptvue.js