Divide the table header column "th" into two separate columns

Can someone assist me in achieving the output displayed in the image? I want to separate the header th into two lines like the blue line shown. I need two headers for a single td column. Please help, thank you. https://i.sstatic.net/SwILH.png

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left; 
}
</style>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr> 
</table>

javascripthtmlcss

Answer №1

This piece of code features a separator with a blue border on the left side:

th:last-child:after {
    content: 'Another';
    border-left: 1px solid blue;
    padding-left: 5px;
    margin-left: 10px;
    display: inline-block;
}


table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left; 
}
th:last-child:after {
    content: 'Another';
    border-left: 1px solid blue;
    padding-left: 5px;
    margin-left: 10px;
    display: inline-block;
}
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr> 
</table>

Answer №2

Simply include the attribute colspan="2" in the last td tag and add a th element. That's all you need to do.

To learn more about how to use the colspan attribute, visit w3schools colspan.

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left; 
}
</style>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Another</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td colspan="2">Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td colspan="2">Mexico</td>
  </tr> 
</table>

Answer №3

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left; 
}
</style>
<table>
  <tr>
    <th>Organization</th>
    <th>Contact Person</th>
    <th>Location</th>
    <th>Details</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td colspan="2">Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td colspan="2">Mexico</td>
  </tr> 
</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 method for converting a plist file into a json file?

Is there a way to convert an existing plist file into a JSON file using one of the following programming languages: JavaScript, Java, Objective-C, Python, or Ruby? Any suggestions on how to do this? ...

javascriptiphoneobjective-cjsonplist

Sending state data in an Axios POST request

I'm trying to include a state in an axios post request to send data to my backend, but I'm getting an error saying the state I selected is not defined. Here's the code snippet: React frontend import React, { Component } from "react&qu ...

javascriptreactjsexpressaxios

Discovering the method for retrieving post parameters in Node.js

I am currently utilizing Node.js with Express and the httpAsyncClient library in Android. I have sent a request to Express using Post, including parameters. The request goes through successfully, but I am unable to retrieve the parameter in Post. I have ...

javascriptnode.jsexpressmultipartform-dataform-data

Persistence of query parameters from old routes to new routes using vue-router

Whenever a query parameter called userId is present in a route within my application, I want the subsequent routes to also include this query parameter. Instead of manually modifying each router-link and router.push, I am looking for a solution using rout ...

javascriptvue.jsvue-router

What is the way to change the background color using HTML5 getItem?

Here is the code I am currently using: $(this).css('backgroundcolor', localStorage.getItem('bgColorr') + " !important;"); When I execute this: alert( localStorage.getItem('bgColorr') + " !important;"); I receive the correc ...

jquerycsshtmllocal-storage

Go through each item in the array and change its properties

When retrieving data from the database, I receive the following information: "Data": [{ "mainData": [{ "_id": ObjectId("5ab63b22d012ea2bc0bb7e9b"), "date": "2018-03-24" }], "files": [ { "_id": ObjectId("5ab63b22d012ea2bc0bb7e9d"), ...

javascriptdatabaseangular

Ways to access a JavaScript object beyond the function scope

Using the code below, I am able to retrieve JSON data when an element is clicked. This data is then used to create a table, fill the cells with images, and append the table to a specific div. function LoadImagesByCategory() { $.getJSON("/Service/GetJs ...

javascriptjquery

Choose only the values that start with a letter in the autocomplete list

I am currently utilizing the datalist feature for my autocomplete field. Everything is functioning properly. In my list, I have the values james, reeta, and mary. For example, if I type in "r" in the autocomplete box, it shows both reeta and mary because ...

html

creating a JSON array within a function

I am currently developing an Angular application and working on a component with the following method: createPath(node, currentPath = []){ if(node.parent !==null) { return createPath(node.parent, [node.data.name, ...currentPath]) } else { retu ...

javascriptangulartypescript

MongoDB update operation is incomplete

My model includes fields such as "id," "liked," "likedBy," and "matched." I am updating my database to add an id based on hypothetical likes; it stores the target's id in the current user's liked field and the current user's id in the target ...

javascriptnode.jsmongodbexpressmongoose

Can a ng-repeat value be assigned to a text input field?

<tr ng-repeat="person in users" ng-class="{'chosen': person.AdmissionID == currentSelection}" ng-click="selectRow(person.AdmissionID)"> <td>{{person.AdmissionID}}</td> <td>{{person.AdmissionNumber}}</td> ...

javascripthtmlangularjs

Issue encountered when trying to integrate a CSS sticky footer with a liquid/fluid layout

I've been attempting to incorporate the CSS Sticky Footer technique demonstrated at cssstickyfooter.com. (I also experimented with Ryan Fait's solution without success). I believe I've followed all the instructions correctly. I have a conta ...

csshtmlfootersticky-footer

What steps should I follow to obtain code coverage data in my Aurelia application with the help of karma?

After creating my Aurelia app using the Aurelia CLI (au new), I wanted to set up code coverage, preferably with karma-coverage, but was open to other options as well. First, I ran npm install karma-coverage --save-dev and then copied the test.js task over ...

javascriptcode-coveragekarma-coverageaurelia

Generate HTML elements within an AngularJS directive and establish a click event

Can you show me how to create some DOM elements and add a click event to them using an AngularJS directive? My current approach is as follows: var list = document.createElement("div"); list.classList.add('myList'); for(var i = 0; i < n; i++) ...

javascriptjqueryangularjsclickbind

Waiting for jQuery to load until the entire document is fully loaded

When working on my web application, I encountered an issue with loading a large document into an iframe. This document contains important information that affects the title, buttons, and text displayed on the page. I want to display an animated gif in thre ...

jqueryhtmliframe

Using Mootools to call a class function from a bound CSS class may lead to an error stating that it is not a function

Utilizing Mootools 1.3.2 Here is the code snippet: var DNReportAbuse = new Class({ Extends: DNUserDialog, comment_id: null, container: null, initialize: function(classname) { var bindclass = $(document.body).getElements(classname); bindclass. ...

javascripteventsbindingmootools

Implementing AJAX requests in jQuery DataTable with ASP.NET MVC

For some time now, I have been using the jQuery DataTables 1.10.13 plugin. Recently, I encountered an issue related to the ajax data source for my HTML table. This is how I initialized jQuery DataTable inside Files.cshtml <script language="javascript" ...

javascriptjqueryajaxasp.net-mvc

I'm looking to showcase the list in a navigation bar by clicking on the hamburger menu. I want to include the 'home' and 'about' text specifically

Having trouble implementing the hamburger menu functionality in my HTML/CSS project. When clicked on a shrunken screen, I want the 'Home' and 'About' text in the nav to appear stacked on top of each other. JS is causing me some difficul ...

javascripthtmlcss

Toggle the visibility of a table row depending on the selected value of a Radio button

I have a jQuery script that I am working on, which toggles the visibility of table rows based on the selection of radio buttons. The current code functions properly when a radio button is clicked, but I would like to enhance it to automatically show or hid ...

javascriptjquery

A guide on dynamically checking the checkbox values in each row of a table using JavaScript or jQuery

My table is dynamically populated with values from a database using the following code: var row = table.insertRow(i); i = i+1; // Insert new cells (<td> elements) at the 1st and 2nd position of the new <tr> element: var cell1 = row.insertCell ...

javascriptjqueryhtmlcheckbox