Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

I made a switch from an old table to a new one constructed using Divs, and everything seems to be working fine except for one issue. I am trying to create a header that spans the entire width of the table without having multiple cells in the heading like in the table-heading css class. Unfortunately, I have been unable to figure out how to achieve this. I attempted to use colspan, but it didn't work since divtables do not support this feature.

Below is a brief example of my table structure:

.divTableCell{
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    background-color: #ffffff;
    width: 50%;
}
.divTableRow {
    display: table-row;
    width: 100%;
}
  <div class="divTableRow">
    <div class="divTableCell">1</div>
    <div class="divTableCell">2</div>
    <div class="divTableCell">3</div>
  </div>

Every attempt I've made to create the header using the Table-heading class has resulted in it only spanning over the left table cell.

If anyone could provide assistance with this, it would be greatly appreciated! Thank you.

htmlcss

Answer №1

If you're looking to change the header into a table-caption, you can follow the example provided below:

.divTableCell{
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    background-color: #ffffff;
    width: 50%;
}
.table {
    display: table;
}
.divTableRow {
    display: table-row;
    width: 100%;
}
.header {
    display: table-caption;
    border: 1px solid #ccc;
}
  <div class="table">
  <div class="header"> This is a test</div>
  <div class="divTableRow">
    <div class="divTableCell">1</div>
    <div class="divTableCell">2</div>
   <div class="divTableCell">3</div>
  </div>
 </div>

Answer №2

.newTableCell{
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    background-color: #ffffff;
    width: 50%;
}
.newTableRow {
    display: table-row;
    width: 100%;
}

<div style="width:100%;">
<div style="border:1px solid #000;" ><b>header</b></div>
<div class="newTableRow">
    <div class="newTableCell">1</div>
    <div class="newTableCell">2</div>
    <div class="newTableCell">3</div>
</div>
</div>

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

JavaScript function is not identifiable

I am currently developing a tic-tac-toe game with 9 buttons that will display either an X or O image depending on the boolean value of the variable isX. The main container for these buttons is a div element with the id 'stage' and each button ha ...

javascripthtmlcssfunction

What is the best way to create a flexible grid that automatically adjusts to either two columns or one column depending on the width of the

My challenge lies in arranging items into two columns or one, with a specific layout for mobile devices. The order of the items changes between the two column and single column layouts. The number and size of items vary dynamically. For example, in a tw ...

htmlcsscss-grid

Bootstrap does not control the text family, weight, and line height

Currently, I am practicing adding grid layouts using Bootstrap. I have been trying to change the font styling within my project, but unfortunately, none of the changes seem to be taking effect. It's quite frustrating because even though I'm follo ...

htmlcssbootstrap-4

Tips for populating an array with boolean values when a checkbox change event occurs:

I am looking to fill the answers array with boolean values. The checkboxes on my form are generated dynamically, but there will only be four of them. When a checkbox is unchecked, its corresponding value in the answers array should be false; when checked, ...

javascripthtmlarraysreactjscheckbox

Exploring the world of digital audio files and understanding the distinction between 'file:/// and '

I'm experiencing an issue with playing MP3 and MP4 files in Firefox and Internet Explorer. Can someone explain the difference between running a page by double-clicking on it (file:///...) compared to using IIS (http://...)? <object data="../../Med ...

htmlmedia

Click on the anchor tag to reveal additional content beyond the default display

This question stems from a previous discussion on the topic at: Only show specific div with anchor In my profiles.html page, there are profiles of around 20 people all grouped under a class named "profile" and unique ids such as "example-name1", "example ...

jqueryhtml

Steps to display a modal within an inactive tab:

I have been using ngx-bootstrap tabset, although I believe this issue could apply to all bootstrap tabs as well. <tabset> <tab class='active'> <angular-modal-component> </angular-modal-component> </tab> <tab> & ...

cssangulartabsbootstrap-5ngx-bootstrap

What is the best way to set up a HTML redirect page with Google Analytics code inserted into it?

Is it possible to generate an HTML page that redirects to a subfolder, yet maintains the Google Analytics code block for tracking on the homepage? ...

htmlhttp-redirectgoogle-analytics

Is there a single CSS property value that you want to exclude?

Is there a way to disable only one specific value of a CSS property? For example, when it comes to the 'text-decoration' property, options include none, underline, overline, line-through, blink, and inherit. I want to allow all values of text-de ...

htmlcsstext-decorations

I am struggling to make php redirect work using onclick() function

My PHP button is not redirecting properly. Assuming the page destination is correct, is there anything else that could be causing this issue? echo "<button id=\"create\" onclick=\"location.href('/team/teams.php?op=create');&bso ...

javascriptphphtmlredirectonclick

Is the mobile site displaying CSS pixels in the physical pixel resolution?

I am struggling to grasp the problem and finding it challenging to explain it clearly, so I have attached a picture depicting the issue. https://i.stack.imgur.com/E9Gzj.png My current approach involves using ratios of 100% and 100vw for element widths. D ...

csswebmobile-websitepixel

Silky animations in kinetic.js (html5 canvas)

I am seeking a better grasp on kinetic.js animation. Recently, I came across a tutorial at . After experimenting with the code provided, I managed to create an animation that positions my rectangle at x coordinate 100. However, I am struggling to achieve s ...

javascripthtmlcanvaskineticjs

What is the best way to deactivate a button when a certain input field is left blank?

I'm having trouble figuring out how to deactivate a button when specific input fields are empty, while others can remain optional for the process. In my course, we were taught to disable the button until all inputs are valid, so I'm a bit confus ...

javascripthtmlreactjsbuttondisable

Resetting values in Javascript and JQuery when clicking a button

I've recently implemented a feature on my website header where clicking on the search button reveals a search bar, and clicking on the account button reveals an account bar. With some valuable assistance from Madalin, I was able to achieve this functi ...

javascriptjquerycss

A guide to storing data within the client's HTML: Tips and tricks for optimal storage placement

As I develop my website, I am using a technique where I store a simplified version of the web page within the HTML itself. This allows me to send efficient Ajax requests back to the server, as it can analyze what the client's page looks like and send ...

htmlcompressionclient-server

Create a dropdown menu option that changes based on the number of items that have been

I need a selection option that displays values 1 to 5. Depending on the selected value, it should generate select options equal to the number selected. For example, if I choose 3, then it should generate 3 select options. Is it possible to loop the ajax in ...

phpjqueryhtmlmysqlajax

Experience a seamless integration of playing videos in the background using HTML5 with responsive design

Looking for a CSS trick to create a video background that spans the full width of the browser and auto resizes with the browser size. It's essential that it plays on Safari, so please specify the supported video file types. ...

jquerycsshtml

How to eliminate margins in Django's easy_pdf module

For generating PDF from HTML, I utilize easy_pdf in conjunction with xhtml2pdf. Below is a brief example: In view.py from easy_pdf.rendering import render_to_pdf_response context = dict({'user_company': 'test'}) template_name = "pdf ...

pythoncssdjangopython-3.xdjango-templates

Choose a group of radio buttons inside a container when a button is clicked

I have a bunch of containers containing radio buttons. The goal is for the container of a selected radio button to appear different: input[type="radio"]:checked+.container { border: 5px solid red; } <div class="container"> <input class="btn ...

csshtmlcss-selectors

Calculating available balance by subtracting the entered amount from the existing balance in Python Django

In the user profile model within my Django project, there are fields for available balance and current balance. I am looking to deduct an input amount from the current balance in order to display the updated available balance on the user's web page. ...

pythonhtmldjangodjango-models