Connect two cells in a table by incorporating a vertical line in between the rows. Merge header cells

I have incorporated some simple HTML tables on my website and I am encountering two issues that I need assistance with.

1) After adding these tables to my subpage, I noticed that the tables look almost identical but have their horizontal line between table rows in different positions.

2) I am seeking a way to combine two headers.

I have tried to resolve these problems using a code-Live editor without success.

div.blueTable {
  border: 0px solid #FFFFFF;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.divTable.blueTable .divTableCell,
.divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 5px;
  text-align: left;
}

.divTable.blueTable .divTableBody .divTableCell {
  font-size: 13px;
}

.divTable.blueTable .divTableRow:nth-child(even) {
  background: #FFFFFF;
}

.divTable.blueTable .divTableHeading {
  background: #5DBCD2;
  border-bottom: 2px solid #444444;
}

.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: left;
  border-left: 0px solid #F5F4F4;
}

.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle {
  font-size: 14px;
}

.blueTable .tableFootStyle .links {
  text-align: right;
}

.blueTable .tableFootStyle .links a {
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

.blueTable.outerTableFooter {
  border-top: none;
}

.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px;
}

.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  display: table-cell;
}

.divTableHeading {
  display: table-header-group;
}

.divTableFoot {
  display: table-footer-group;
}

.divTableBody {
  display: table-row-group;
}
<div class="divTable blueTable" style="width: 100%">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">People</div>
      <div class="divTableHead"></div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">Lang</div>
      <div class="divTableCell">54</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Height</div>
      <div class="divTableCell">22</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Weight</div>
      <div class="divTableCell">66</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Et</div>
      <div class="divTableCell">55</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Color</div>
      <div class="divTableCell">wb</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">A</div>
      <div class="divTableCell">10</div>
    </div>
  </div>
</div>
</br>
</br>


<div class="divTable blueTable" style="width: 100%">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">Country</div>
      <div class="divTableHead"></div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">E</div>
      <div class="divTableCell">11</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">P</div>
      <div class="divTableCell">23</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">R</div>
      <div class="divTableCell">32</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">H</div>
      <div class="divTableCell">45</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">I</div>
      <div class="divTableCell">57</div>
    </div>

  </div>
</div>
</br>
</br>

htmlcssbootstrap-4dreamweaver

Answer №1

Regarding your initial concern... After testing extensively, I have determined that the issue with the vertical divider between cells is due to a table resizing problem when characters are either added or removed.

To resolve this issue, you can simply include table-layout: fixed; in the outermost container of the table, which in this case would be .divTable. Credit goes to this helpful SO answer for the solution.

.divTable {
  table-layout: fixed;
}

For a demonstration of the fix, refer to this JSFiddle.

Explore the Mozilla docs to learn more about the table-layout property.

As for your second concern, please provide detailed information on what you are trying to accomplish by editing or updating your question.

Lastly, I suggest delving into the Bootstrap docs and incorporating it into your project if you haven't already. Bootstrap can help you achieve your goals more efficiently. Additionally, Bootstrap offers a table structure that may be beneficial in your situation.

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

Displays a white screen once the code is executed

I am attempting to retrieve data from a database, and it appears that I am fetching the information correctly. However, when I run the code, I am presented with a blank page. Since I am new to PHP and MySQL, I would appreciate some guidance on this issue ...

phphtmlmysql

magnify within a div with a set width

Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out. Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning to ...

cssangular

Select an item by populating it with JQuery

Here is the select HTML code I am working with: <div class="form-group col-lg-6 row"> {{ Form::select( 'state',array( 0 => '' ),null, array( 'class' => 'form-control', 'data-placeholder' =&g ...

phpjqueryhtmllaravel

The ion-datetime in Ionic 4 ensures that the floating label always remains visible, even when the input

When an ion-datetime field in Ionic 4 has no value, the label always floats as shown below. Here is my code snippet: <form [formGroup]="statusHandlerForm"> <ion-item class="input-container " align-items-center no-padding> <ion-la ...

javascriptcssangularionic-frameworkionic4

Using PHP's include/require method with a dynamic path

Looking for assistance with my issue! Ajax is returning the correct information and displaying it in an 'alert(html)' on 'success'. The PHP code echoes $idName and $path correctly on the carrier page where the code resides. There are no ...

javascriptphphtml

What is the best way to prevent text overflow in a div while maintaining its width without dropping down

I have a square element that measures 100 pixels in width. The overflow-x property has been applied, with a value of hidden. My intention was for this setting to conceal any text that extends beyond the boundaries of the container, rather than allowing it ...

htmlcss

What is the best way to compress @font-face using gzip?

Could you demonstrate how to gzip a webfont kit? The code provided by the generator is as follows...what modifications are necessary? @font-face { font-family: 'DesigersBold'; src: url('desib__-webfont.eot'); src: url(&apos ...

cssgzipfont-face

Limit the character input in AngularJS/Ionic to a specific number

I have a text input field that needs to restrict the user from entering more than a specific number of characters. Let's say I only want the user to type 10 characters, and if they try to enter more, the text field should not accept it. It should stop ...

htmlangularjsvalidationangularjs-directiveionic-framework

Unexpected results can occur when using ngClass and CSS with all unset

Within my Angular 4 project, I am utilizing ngClass on an object that contains a CSS class applied with unset: all within it. Despite knowing that ngClass adds its properties, the expected result was for all values to be unset and the style elements from n ...

htmlcssangular

Having trouble with JQuery's append method on the <head> tag?

I am having an issue with this particular code block. It seems to be unable to insert the meta tag into the head section. Any suggestions on how to resolve this problem? <html> <head> <title>hello world</title> </head> < ...

javascriptjqueryhtmlmeta

Error loading custom Javascript in MVC 4 view during the first page load

I'm working on an MVC 4 application that utilizes jQuery Mobile. I have my own .JS file where all the functionality is stored. However, when I navigate to a specific view and check the page source, I notice that all scripts files are loaded except fo ...

javascriptjqueryhtmlasp.net-mvcjquery-mobile

Tips for transferring parameters using a href tag without causing a page refresh

Is there a way to pass parameter values without refreshing the page? I would appreciate any help. Thank you. searchresult.php <a href="index.php?id=<?php echo $data['ID']?>">clickme</a> index.php <?php echo $_GET['id ...

phphtmlhref

What steps can you take to ensure that a pre-loaded swf file occupies the entire browser

Allow me to elaborate on my query. I am currently designing a flash website and utilizing a small external preloader swf to load the main swf. I have successfully configured the preloader swf to occupy the entire browser window, however, once it loads in ...

htmlactionscript-3flashpreloaderpreload

The customization of jQuery UI Slider is failing to function as expected

In my quest to create a customized jQuery slider, I encountered the need to change the background of the slider handle. After experimenting with some code on this link, I am still unable to achieve the desired effect. Following the documentation, I have a ...

jqueryhtmlcssjquery-uiuislider

Discover a new method for mastering jQuery Draggable: an advanced technique

Click here for the interactive demo. I'm trying to create a draggable effect for the cover element within the pic-area, but I only want it to be draggable until it completely fills the space without any white gaps. Please have a look at the example b ...

jquerycssjquery-ui-draggable

Resolving the problem of degrading image quality in HTML Canvas

Recently, I came across an issue while trying to display graphics on an HTML page using canvas. The problem I encountered was that the canvas element was somehow reducing the quality of my images during rendering, especially after some time. Let me visual ...

javascripthtmlcssdomcanvas

Layering elements using CSS and HTML to create a background effect

I have created a menu using div elements and I want one of the menu items to have a background that extends behind it to the body. Here is the structure: body { background-image: url(path/body.png); } #menu { overflow: hidden; width: 400px; ba ...

htmlcss

jquery and radio button technology

I am attempting to create a basic function using jquery, but it is not functioning properly. Here is the radio button in question: <input type="radio" id="price" name="shipping" class="styled" /> In the head section of my HTML, I have included the ...

phpjavascriptjqueryhtmlajax

Mastering the nav-item class in Bootstrap 4 for optimal navigation functionality

When I look at the examples in the documentation, I have noticed that the .nav-item class is not doing anything when I inspect my nav bar (the class doesn't show up in the console)... Although this isn't a major issue as I can apply my own style ...

cssbootstrap-4

Issue with Modal Box: Datepicker not Displaying Correctly

I have implemented a modal box in my webpage. When I click on a text field where a datepicker is added, it does not display anything. However, when inspecting the element using Chrome's developer tools, I can see that the 'hasDatepicker' cla ...

jquerycssdatepickermodal-dialog