CSS Code Failing to Adjust Inner Components Width in Variable Table

I'm facing an issue while trying to create an excel-style table using HTML and CSS. The problem arises when I attempt to have a varying number of columns in different rows, as the table exceeds the border limit and expands on its own. My goal is to replicate the layout shown in the image.https://i.stack.imgur.com/4VhR6.png

table
   {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    border: 3px solid #151515;
   }
   th, td
   {
    border: 1px solid #151515;
    padding: 12px;
    text-align: center;
   }
   th
   {
    font-weight: bold;
   }
   tfoot tr:nth-child(2)
   {
    font-weight: normal;
    height: 100px;
   }
   .colored td
   {
    background-color: #aaaaaa;
   }
<table>
  <tbody>
    <tr>
      <th colspan="4" class="title">PURCHASE DETAILS</th>
    </tr>
    <tr class="colored">
      <th rowspan="2">BUDGET CODE:</th>
      <td>Account Code</td>
      <td>Cost Center</td>
      <td>Project Code</td>
      <td>DEA</td>
    </tr>
    <tr>
      <td>5458</td>
      <td>22222</td>
      <td>3658954</td>
      <td>95874</td>
    </tr>
    <tr>
      <th>PO Number:</th>
      <td>PO/SC/2010/33</td>
      <th>Supplier:</th>
      <td>STORM TECH</td>
    </tr>
    <tr>
      <th>SOF:</th>
      <td>00254584</td>
      <th>Value (Purchase Price USD):</th>
      <td><b>1,084.89</b></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Plan After Award Ends:</th>
      <td colspan="2">Carry Over</td>
    </tr>
  </tfoot>
</table>

If anyone could provide assistance, it would be greatly appreciated.

javascripthtmlcss

Answer №1

Using a table layout may not be the ideal choice in this situation, but it is possible to make it work. You can achieve the desired effect by creating more cells per row and spanning the cells over 2 or 3 "cells"

table
   {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    border: 3px solid #151515;
   }
   th, td
   {
    border: 1px solid #151515;
    padding: 12px;
    text-align: center;
   }
   th
   {
    font-weight: bold;
   }
   tfoot tr:nth-child(2)
   {
    font-weight: normal;
    height: 100px;
   }
   .colored td
   {
    background-color: #aaaaaa;
   }
<table>
  <tbody>
    <tr>
      <th colspan="8" class="title">PURCHASE DETAILS</th>
    </tr>
    <tr class="colored">
      <th rowspan="2">BUDGET CODE:</th>
      <td colspan="2">Account Code</td>
      <td colspan="2">Cost Center</td>
      <td colspan="2">Project Code</td>
      <td>DEA</td>
    </tr>
    <tr>
      <td colspan="2">5458</td>
      <td colspan="2">22222</td>
      <td colspan="2">3658954</td>
      <td>95874</td>
    </tr>
    <tr>
      <th>PO Number:</th>
      <td colspan="3">PO/SC/2010/33</td>
      <th colspan="2">Supplier:</th>
      <td colspan="2">STORM TECH</td>
    </tr>
    <tr>
      <th>SOF:</th>
      <td colspan="3">00254584</td>
      <th colspan="2">Value (Purchase Price USD):</th>
      <td colspan="2"><b>1,084.89</b></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Plan After Award Ends:</th>
      <td colspan="6">Carry Over</td>
    </tr>
  </tfoot>
</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

What is the best way to incorporate custom CSS into an angular-fullstack application?

I'm interested in incorporating an image into a jumbotron and adjusting its width correctly, similar to what was discussed in this question: Bootstrap image to jumbotron width However, I am unsure of where to place my custom CSS code to achieve the d ...

cssangularjstwitter-bootstrapgruntjsyeoman

Transferring information from user input to a table using AngularJS

I need assistance with AngularJS to transfer data from 2 input fields (name and last name) into a table row. <input type="text" ng-model="name"> <input type="text" ng-model="lastname"> Here is the structure of my table: <tabl ...

angularjshtml

css how to style a table row with a specific identifier

Although this question has been asked millions of times on the internet, my English skills are not great and I struggle to find the right words to search. I have a table with a specific ID set up like this: <table class="tableClass"> <tr id="one ...

css

Safari displays the contents of JSON files instead of automatically downloading them

I am facing an issue with a JavaScript code that generates a link to download a JSON file. The link is structured like this: <a href="data:text/json;charset=utf-8,..." download="foo.json">download</a> While the link works perfectly in Chrome ...

javascriptjsonsafari

Should you construct a fresh element using JavaScript, or opt to reveal a concealed one using CSS?

What are the benefits of using the following approach: var target = document.getElementById( "target" ); var newElement = document.createElement( "div" ); $( target ).after( newElement ); compared to just hiding the newElement div with CSS and showing ...

javascriptjquerycss

Date Boxes in a Tangled Web

Looking to showcase multiple dates on a screen, I'm encountering an issue where clicking on a date button opens a datepicker. If the user clicks out of the box, the datepicker closes properly. However, when another datepicker button is clicked, instea ...

javascriptjqueryangularjstwitter-bootstrapdatepicker

jQuery: Track mouse movement with a delay

I'm looking to create a div that follows cursor movement with a slight delay, similar to the effect seen on this website: In the example link provided, you can observe that the 'follower' has a brief delay in its animation. I attempted to ...

javascriptjquerymouseeventmousemove

The ".splice()" method continuously removes the final element from an array

I have implemented a function on my form that allows me to add multiple file inputs for various images by clicking a button. Although this functionality is working correctly, I am facing an issue while trying to delete an input field using .splice. Instead ...

javascriptvue.jsnuxt.js

"Looking to replace a character class pattern using regex in JavaScript? Here's how you can easily

I have a string: "\W\W\R\" My goal is to transform this string using regular expressions into: <span>W</span><span>W</span>\R This is the code I'm currently using: "\W\W\R".replace(/&b ...

javascriptregex

Employ a class function within router.get

I'm a beginner with node.js and I'm running into an issue when trying to use a class method in the router.get callback function. Can someone assist me with this problem? Route.get() is expecting a callback function but received a [object object] ...

javascriptnode.jsexpress

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui

Discovering details regarding cookies established by an external domain

Is it possible to retrieve the host address of the domain that created a cookie on my webpage? Here is the scenario I am facing: I am on "domain A" and have a script linked from "domain B". A method on "domain B" sets a cookie on my "domain A". How can ...

javascriptcookies

What is the best way to encapsulate a function that uses `this.item.findElement()` from Selenium in a separate file?

I'm currently working on setting up a Selenium Webdriver and Cucumber.js test environment using Node.js. In the homePageSteps.js file, I have a check to verify if a banner exists on a page: Then('there should be a banner', async function() ...

javascriptnode.jsselenium-webdrivercucumberjs

Retrieve user input from an HTML form and pass it as a parameter in a jQuery AJAX request

Is there a way to pass a value from a user input in an HTML file to jQuery.ajax? Take a look at the code snippet from my JS file: jQuery(document).ready(function() { jQuery.ajax({ type: 'POST', url: 'myurl.asp ...

javascriptjqueryhtmlajax

Find all objects in an array of objects that contain at least one value that matches a given string

I am currently integrating search functionality in my application. The UI search results are generated from an array of objects. My goal is to loop through the name, custNumber, and sneak values in each object and display only the ones that contain a subst ...

javascriptarrayssortingvue.jsfiltering

Ways to extract text from a temporary element

Here is my HTML code: <div class="p-login-info" ng-show="loggedOut()">My text.</div> This is the corresponding JavaScript code: var e = element(by.className('p-login-info')); e.getText() .then(function(text){ var logoutText = ...

javascriptseleniumtextprotractorend-to-end

What is the best way to enlarge the image to a specific percentage?

Although I have never programmed in HTML or worked on web projects before, I am currently using a git repository where the project is client-server. This means I need to modify the code to suit my requirements, which includes working with HTML. My problem ...

html

Ways to refine data using multiple criteria

I have a list of alarm data that I need to filter based on specific conditions. If there are multiple alarms of type "pull_Alarm" and "emergency_alarm" in the same location, I want to prioritize the "emergency_alarm". Here is my list: [ { ...

javascriptangularjs

Stylish Card Design

Below is the CSS code: *{margin:0; padding:0; box-sizing:border-box; } img{ display:block; max-width:100%; height:auto; } html{ scroll-behavior:smooth; } body{ min-height:100vh; font-family:fantasy; font-size:1.12 ...

javahtmlcssflexboxcss-selectors

How should .has(), .get() and .set() be properly implemented for a JavaScript Map() within an ExpressJS server?

Feeling thrown off by javascript Map()? My query revolves around javascript Map() - the set, get, and has() functions. Despite thinking I was an expert, it seems I still have things to learn... Situation: I'm dealing with a 'global' map sto ...

javascriptnode.jsexpress