Adjust the width of columns using HTML and CSS

UPDATED: Here is a real-life scenario I am facing:

I am trying to adjust the width of columns in my table using inline CSS. Let me provide you with an example:

The Table was initially set to 100%, like this: <table width=100% ...>

The total number of columns in my table is 14 and some columns have a colspan = 2.

The issue I am experiencing with my HTML/CSS is that once a row cell is filled with content, the width of the column header also changes. The first column has ample space, but the 2nd column (with colspan = 2) shrinks due to the content. This creates a layout like the image below:

https://i.stack.imgur.com/i8CZB.png

In the provided image, it can be seen that the first column should shrink slightly while the Prev QA column should expand.

My objective is to reduce the width of the first column and increase the width of the 2nd column. However, no matter what changes I make or how I add width to td, it does not impact the layout. Does anyone have a solution for this? Thank you in advance.

Table: <table width=800...>

First row: 

<tr border=0><td style='cellspacing =0; ' border=0 colspan=12 style='font-family: Calibri;Bold; font-size: 14pt; color: white; font-weight:bold; background-color:#0d384f;' width=100%>Title</td><td style='cellspacing =0; ' border=0 colspan=2 align='right' style='font-family: Calibri;Bold; font-size: 14pt; color: white; font-weight:bold; background-color:#175072;'>title2</td></tr>"

Second row (Header row) (need to change)

<tr BGCOLOR=\"#1b629b\"> <td style= \"font-weight:bold\";width=100><font color=white><Center> Client Name</Center></td><td style= \"font-weight:bold\"><font color=white><Center>Engagement</Center></td><td style= \"font-weight:bold\"><font color=white><Center>DataFreq</Center></td><td style= \"font-weight:bold\";colspan=2><font color=white><Center>Prev QA Account Balance </Center></td><td style= \"font-weight:bold\";colspan=2><font color=white><Center>Current QA Account Balance</Center></td><td style= \"font-weight:bold\";colspan=2><font color=white><Center>Prev QA ATB Balance </Center></td><td  style= \"font-weight:bold\";colspan=2><font color=white><Center>Current QA ATB Balance</Center><td style= \"font-weight:bold\"><font color=white><Center>Max Admit Date </Center></td><td style= \"font-weight:bold\"> <font color=white><Center>Max Charge Date</Center></td><td style= \"font-weight:bold\"><font color=white><Center>Max Trans Date </Center></td>")

htmlcss

Answer №1

From what I gather, to specify the width of columns in a table, you just have to define it using the <col> tag:

<table width='100%'>
   <col width='30%'> <!--First column width-->
   <col width='40%'> <!--Second column width-->
   <col width='40%'> <!--Third column width-->
<!--input table data here -->
</table>

For your combined heading, it will automatically use the widths of the second and third columns.

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

the draggable element turns into nothing

I have created a task manager based on a tutorial I found online. After following the tutorial, I decided to add more functionality by allowing users to add tasks when clicking on a button. Everything works fine until I try to drag one of the added element ...

javascripthtml

Guidelines for refreshing owl carousel on ng-click using AngularJS

I am encountering a significant issue with the use of an owl carousel in angular.js. It functions properly the first time, but when I have buttons on the same page and need to rebuild the owl carousel upon clicking a particular button with new data, that&a ...

htmlangularjsowl-carousel

What is the reason for not being able to align breadcrumb text to the right

This section contains HTML code and CSS for a breadcrumb container. The issue is that the breadcrumb is currently displayed on the left side. How can the breadcrumb be right-aligned? .breadcrumb-container { font-family: "Work Sans", sans-serif; ...

cssbootstrap-4

Refresh the HTML content within a specified div element

In my index.html, there is a graph (created using d3.js) along with some code that displays a stepper with a number of steps equal to the child nodes of the clicked node: <div ng-include="ctrl.numlab==2 && 'views/stepper-two-labs.htm ...

javascripthtmljqueryangularjs

Creating a customized file input using CSS

I am currently utilizing Bootstrap4 to craft my webpage and I am incorporating a custom file input bar. To retrieve the three labels of the input bar ("Choose file", "Browse", "Upload") from my stylesheet, I have created three custom classes with their co ...

javascripthtmljquerycssbootstrap-4

Is there a way to incorporate the ::after or ::before pseudo-elements into an image tag?

While working on my project, I attempted to incorporate the ::after tag (I had used ::before as well) for an image within an img tag. However, I am facing difficulties as it doesn't seem to be working. Any advice or guidance would be greatly appreciat ...

javascripthtmlcssimageselector

Is there a way to eliminate the border of an image attribute pulled from an input field?

Seeking assistance with a persistent issue I'm facing. I have an input for an image and a script to display the selected image. However, when the input is empty, a frustrating black border appears around the image attribute. How can I remove this bord ...

javascripthtml

Error occurs when a list index goes out of range within a for loop that contains an embedded

Here is the Python code I am working with: raw_list = reminders_context['data']['reminder_list'] This code retrieves the necessary information successfully. However, when I try to run the following code snippet, it gives me a "list i ...

pythonhtmldjango

Problem with input field borders in Firefox when displayed within table cells

Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...

javascripthtmlcss

Invoke a JavaScript function with arguments upon clicking on a hyperlink

Struggling to generate code for an href tag with a JavaScript function that takes parameters - a string and an object converted into a json string. My initial attempt looked like this: return '<a style="text-decoration:underline;cursor:pointer" ta ...

javascripthtmldom

Hide the popup menu when the user clicks outside of it

I am presenting the following code <!DOCTYPE html> <html> <head> <title>GalacticCraft</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="shortcut icon" type="image/png" href="fa ...

javascripthtmlcss

Steps to update the action attribute in a form element upon clicking a button

Within the following code snippet, there are 3 buttons - update, back, and delete. Depending on which button is clicked, the $page variable should be assigned to the action attribute in the form element, with the posted data being sent accordingly. <f ...

phphtml

Changing the class of a div element in a jQuery array or JSON object with a click event

I am trying to create a function where clicking on a div adds its child's class to either a JQuery array or a JSON object. Clicking on the div again should remove the class from the array. Multiple divs should be able to be "selected" and deselected. ...

jqueryarraysjsonclasshtml

Base64 image failing to display in Internet Explorer

Is there a way to efficiently handle the base 64 form of an image in different browsers? The code I have achieves this as shown below: import base64 import requests img=requests.get('https://example.com/hello.jpg') base=base64.b64encode(img.cont ...

pythonhtmlimageinternet-explorerbase64

Adjust the text to fit neatly within a circular-shaped column container

I am currently working with Bootstrap 5 and I have a row with two columns positioned next to each other. My goal is to apply rounded borders to the left column while ensuring that the content remains within the div. Below is the code snippet: <div clas ...

htmlcssbootstrap-5

Creating a JavaScript array in Rails 4 based on current data without the need to reload the webpage

Currently in my rails 4 app, I am working on a unique tags validation using jquery validate to ensure that tags are not duplicated before they can be added to an item. The tag list structure is as follows: <div id="taglist"> <span class="label ...

javascriptjqueryhtmlruby-on-railsajax

The Facebook like button seems to be missing from the webpage

Hi everyone, I'm having trouble getting the like button code to work. I used the wizard on Facebook but the button still isn't showing up, even with a simple HTML setup like this: <!DOCTYPE html> <html> <head> </head> < ...

htmlcssfacebook

Show full-screen images on click using Ionic framework

Currently, I am working on developing a mobile app using the Ionic framework. I have created a layout that resembles the one shown in this Card Layout. My question is: How can I make the card image display in full screen when clicked by the user and retur ...

javascripthtmlangularjsionic-framework

Ways to enable file/result downloads on a website using HTML

Could you please take a look at this repository: https://github.com/imsikka/ArtGallery I am looking to create a downloadable result using a download button. I can create the button, but I am unsure of how to make the file actually downloadable. Do I need ...

javascripthtmlcssuser-interface

I am experiencing an issue with the HTML5 video tag as it is not displaying the

Having trouble playing a user-uploaded video using the <video tag. The video doesn't seem to load into the DOM properly. Here's the code snippet: function Videos ({uploadedFiles}){ if (uploadedFiles) { console.log(uploadedFile ...

javascripthtmlreactjsvideo