CSS Tables: Combining Columns With Colspan

As I try to avoid using HTML tables whenever possible, I've turned to CSS tables instead. But now I'm wondering if there's an equivalent of colspan in CSS tables.

This is the CSS code I currently have:

#fleetTable{display: table;width: 360px;margin: 0 auto;margin-top: 20px;font-size:.875em;float:left;}
    .fleetRow{display: table-row;}
    .fleetCell{display: table-cell;}

And here's the corresponding HTML:

<div id="fleetTable">
    <div class="fleetRow textright">
        <div class="fleetCell">Headline</div> <!-- I want this to span both columns below and be centered -->
    </div>
    <div class="fleetRow textright">
        <div class="fleetCel;">Cell1</div>
        <div class="fleetCell">Cell2</div>
    </div>
</div>  

Which selector should I use to achieve this effect?

Answer №1

Assuming your header is in the first cell of the first row with the class .fleetCell, you can target it using the :first-child pseudo selector.

CSS

.fleetCell:first-child{
   text-align:center;
}

Check out this JS Fiddle Example

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

Incorporating design library styles (js variables) into my scss documents

I have been tasked with utilizing a custom design library that exports styles, such as fonts and font weights, as JavaScript objects. However, my code base primarily consists of SCSS files. Is there a method to incorporate JavaScript objects into my SCSS f ...

How can I position the hyperlink inline with the font-awesome Icon?

Hey everyone, I'm having some trouble creating a top info bar in Bootstrap 4.1.3 with Font-awesome 5.5. I want to include essential details like phone number, email address, and social icons, but whenever I try to add a hyperlink after the icon, it dr ...

Issue with Jquery autocomplete not populating data in additional fields

Issue: I have implemented a dropdown list for selecting suppliers, and based on the selected supplier, users can search for items using JQuery Autocomplete. However, when an item is selected from the search results, the text boxes for 'description&apo ...

Having trouble getting the jQuery validate function to work properly with a select element

I have successfully implemented a validate function for my input fields : $.tools.validator.fn("#password", function(input, value) { return value!='Password' ? true : { en: "Please complete this mandatory field" }; }); $("# ...

Only the cursor CSS is applied to the parent div, not its individual elements within the div

The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set cursor:not allowed; to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowe ...

Creating a dynamic dropdown menu in HTML to showcase a variety of images

I am trying to create a drop down menu where each selection displays multiple elements. For example, if sensor 1 is chosen, I want to show a picture of its location and its address. I am having trouble figuring out how to add these functions to the drop ...

The behavior of placing an <a> element within an inline <li> element

I find the HTML / CSS result below to be quite puzzling and unexpected. I am eager to understand the reasoning behind how this is being interpreted. Consider: #nav { list-style-type-none } #nav li { display: inline; } /* make the LI's stack ho ...

Endlessly refreshing occurs when attempting to load a separate CSS stylesheet using document.write

I am attempting to implement two separate stylesheets on my WordPress blog - one for web access and another for our iOS app. Currently, we are adding ?app=true to the URL when accessing content through the app in order to distinguish between the two. Using ...

Issue with Laravel: Scripts and image sources are not functioning properly in layouts when utilizing URLs with prefixes

Path Route::group(array('before' => 'guest'), function() { // landing page Route::get('/', array('uses' => 'HomeController@home', 'as' => 'home')); Route::get(&apo ...

transfer the output from the second selection to the adjacent div

I am utilizing a library called select2 specifically for single choice scenarios. My goal is to transfer the selected option to a different div once it has been chosen. Here is the code I have so far: https://jsfiddle.net/hxe7wr65/ Is there a way to ach ...

Javascript functions correctly when the HTML file is opened locally, however, it encounters issues when accessed through an http-server

My HTML file includes an embedded web widget from tradingview.com with the following code: <!-- TradingView Widget BEGIN --> <span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style ...

Creating a Modern Tooltip Menu with HTML, CSS, and Bootstrap

My goal is to design a menu that opens to the right, similar to a tooltip. I have experimented with different bootstrap techniques, but I am encountering difficulties in including HTML li elements within the tooltip. https://i.sstatic.net/mAHKS.jpg ...

Tips for effectively managing Navbar color adjustment while scrolling in Angular?

I'm currently working on an Angular project and I am looking to incorporate a navbar with a transparent background that changes color when scrolled. I am utilizing bootstrap classes for this particular task. The HTML code for my Navbar heading is as ...

Iframe not functioning properly on Internet Explorer versions 8-11 when using WordPress

I'm having trouble getting my WordPress video to display when using an iframe. When I try to view it in Internet Explorer, the video automatically loads in Windows Media Player instead of playing through the iframe. The video files are local mp4s and ...

Video files embedded using Shopify's HTML code may not be visible on iPhones

Hello everyone, I hope you can help me with my issue! I have successfully integrated an HTML video onto my Shopify homepage, but I am experiencing some trouble when trying to view it on an iPhone. Instead of the video playing, I see a blank box. Below is ...

Step-by-step guide on navigating back in Angular 12 without triggering a page refresh

As an illustration, consider a scenario where I input values into a table and move to the next page. Upon returning to the page, I expect the entered values to still be present. I attempted to achieve this using this._location.back(), but instead of disp ...

Troubleshooting the Bootstrap 4 Grid System

I am encountering some difficulties with the grid system in Bootstrap 4. I have a main content section with col-sm-9 and a right sidebar with col-sm-3 float-right. However, the sidebar does not align properly starting from the top, instead it appears just ...

Utilize the splice function when resizing the window based on specific breakpoints

On a series of div elements, I have implemented some JS/jQuery code that organizes them by wrapping every three elements in a container with the class .each-row. <div class="element"></div> <div class="element"></div> <div class ...

Is there a way to extract the content within the HTML tags as well as the text enclosed within parentheses?

When working with my HTML content, I came across the following line: <span>(48 עמודים סה"כ )</span> I am seeking a way to extract only the text "48 עמודים סה"כ" and store the number 48 into an integer variable. Although in t ...

Steps for generating a sophisticated shadow effect using CSS

Currently in the process of revamping a poorly designed website by replacing images with CSS whenever possible, along with other updates. I have encountered a challenging graphic (there are three of these, one for each active tab): https://i.sstatic.net/1 ...