Creating dynamic Bootstrap table columns with consistent widths for each column without the use of JavaScript

I'm trying to create a table with a dynamic number of columns using html/css/Bootstrap without relying on Java Script.

  • The table should span 100% of the parent container's width.
  • Each column in the table should have an equal width (3 columns = 33%, 4 columns = 25%, ...).
  • I want the end result to resemble http://jsfiddle.net/La1xbzvm/ but I don't want to use hardcoded styles like <th style="width: 33%">

Answer №1

If you're looking to make columns of equal size, consider using the table-layout property. This will help create a more consistent layout for your tables.

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

To see an example in action, check out this link: https://jsfiddle.net/powf8vyj/

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

Is it possible to apply a specific CSS color to a row in Angular 9 mat-tables without having to individually set it in multiple locations?

I am working on a mat-table in Angular 9 where I need to implement a function that determines the CSS class for each row... getRowClass(item: Item): string { let class_ = ""; if (...condition1...) { ... } else { class_ ...

What might be the reason behind the selection value not changing in the dropdown menu?

I have two buttons, one for adding an employee and one for editing. Submit Record $("#addNewEntry").click(function(){ departmentName = $("#selectEmployeeDepartment option:selected").text(); locate = $("#selectLocation o ...

Issues with ng-click functionality not activating on <li> HTML elements

I've been attempting to add ng-click functionality to my list, but it's not working as expected. I've tried adding the ng-repeat directive and also without it on li elements. Here is the snippet of HTML code: <ul class="nav nav-tabs"&g ...

Trouble getting CSS and JavaScript to function properly with HTTPS?

It seems that the css and js files are functioning properly on , but not on . As a novice in web design and javascript, I am struggling to find a solution to this issue. Trying to link the CSS file with "//isdhh.org/css/style.css" has not resolved the pr ...

Exploring Alternative Methods to Navigate Through Elements Using JQuery UI Autocomplete

After testing two different approaches: <div id = "team-search-container"> <label for="team-search" class = "text-center"> <input type = "text" id = "team-search"> </label> </div> With the following code sni ...

Can someone please help me convert this jQuery code into vanilla JavaScript?

My Cordova app has an email sending function that utilizes jQuery. During debugging, the ajax function works perfectly in my browser, but once I build the app and test it on my phone, it stops working. I encountered a similar issue before, which was resolv ...

One simple fix for removing default focus styles across all browsers

Is there a universal method to disable the default styling of focused elements across all browsers? If not, what are some of the common styles implemented by the most popular browsers? ...

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

Create a shape using a series of points without allowing any overlap between the lines

JS fiddle There is an array of coordinates that gets populated by mouse clicks on a canvas. var pointsArray = []; Each mouse click pushes x and y values into this array using a click event. pointsArray.push({x: xVal, y: yVal}); The script iterates thr ...

The text is not displaying as expected due to a timeout issue

Trying to create a pop-up that functions as follows: After 3 seconds, the close button should appear, but during those 3 seconds, there will be a countdown. However, I'm encountering an issue where no text is being displayed. var n = 3; function p ...

Tips for enhancing the color saturations of cells that overlap in an HTML table

My goal is to enhance the color of overlapping cells in my HTML tables. For instance, when I click on cell 2, the .nextAll(':lt(5)') method will change the class of the next 4 cells. https://i.stack.imgur.com/mwv8x.png Next, clicking on cell 3 ...

Tips for implementing and utilizing onclick functions in EJS

My goal is to develop a trivia game with interactive features. I aim to enable users to click on an answer, which will trigger a border effect and increase the points variable. Below is the layout of the entire page: <% include ../partials/boilerp ...

The JQuery Datepicker function consistently returns a null value when attempting to retrieve the selected date

I've encountered a challenge while working on a project recently. Currently, I'm utilizing Spring 3.0 with its integrated validation alongside Hibernate 3.6. My goal is to implement a JQuery datepicker for users to input dates. However, the dat ...

Utilize JQuery to Extract HTML Elements

I'm working on developing a Chrome extension and one of my tasks is to extract specific text from the webpage I am currently visiting and store it in a variable. I have been attempting to achieve this using jQuery, however, none of the solutions I&apo ...

Understanding how to sum the values of two separate dropdown selections using jQuery

Is it possible to combine and total up two different selections to display on the "Total" button below? I have added calculations to each selection. When a user selects a quantity, it should automatically sum up and display on the "Total" button, but I am ...

Can you explain the meanings of <div class="masthead pdng-stn1"> and <div class="phone-box wrap push" id="home"> in more detail?

While working on styling my web pages with CSS and Bootstrap, I came across a few classes like "masthead pdng-stn1" and "phone-box" in the code. Despite searching through the bootstrap.css file and all other CSS files in my folders, I couldn't find a ...

Make a flexbox item scroll in the cross-axis once it aligns with the size of another element

In my search, I've come across several questions that are somewhat similar but none quite address the exact issue at hand. While this question on Stack Overflow bears some resemblance, I am specifically looking to utilize a flex element instead of a s ...

**Issue Resolved:** Looking to have the form results appear only when a valid input is submitted; otherwise, the

As a newcomer to PHP, SQL, and HTML, I've been learning for around 3 months now. Can someone assist me in achieving the following: I would like my form to display the results table only if a valid search has been submitted, showing only the database r ...

Exploring the wonders of Html5 Canvas with base64 encoded images

I have a base64 encoded image that looks like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCA...... Is there a way to draw this on a canvas using the encoded image provided above? Does anyone have an example of how to do this? Updated: ...

"Create a table with rows that automatically adjust to the same height, regardless

Is there a way to create a table where the height remains constant regardless of the number of rows added? For example: https://i.sstatic.net/zJNqD.png Even if rows are added, I want the height to stay consistent. I cannot use percentage since the numb ...