Table does not have appropriate rowspan and colspan attributes

I've created a table using bootstrap, but it's not displaying as intended. I used row-span and col-span to format the table, and while most rows are correct, some are not appearing on the page.

To better illustrate the issue, I have included an image for reference: https://i.sstatic.net/lYFV1.png

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class ="table table-bordered" >
  <tr>
    <th> 8</th>
    <th >8 </th>
    <th> 8</th>
  </tr>
  <tr>
    <td colspan="2"> 8</td>
    <td> 8</td>
    <td rowspan="2">8</td>
  </tr>
  <tr>
    <td>8</td>
    <td>8</td>
  </tr>
</table>

htmlcssbootstrap-4

Answer №1

Check out this code snippet:

<!DOCTYPE html>
<html>
<head> 
  
  </head>
 <body>
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1N" crossorigin="anonymous">
<table class ="table table-bordered" >
  
  <tr>
    <th>8</th>
    <th>8</th>
    <th  colspan="2">8</th>
  </tr>
  <tr>
    <td rowspan="2">8</td>
    <td rowspan="2">8</td>
    <td >8</td>
    <td >8</td>
  </tr>
  <tr>
    <td rowspan="2">8</td>
    <td rowspan="2">8</td>
  </tr>
  <tr>
    <td rowspan="2">8</td>
    <td rowspan="2">8</td>
  </tr>
  <tr>
    <td >8</td>
    <td >8</td>
  </tr>  
</table>
   
   
 </body>
</head>  
</html>

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

Is there a way to show a message when I hover over a different text?

I've been attempting to show a text when hovering over another text, but for some reason it's not working. I've followed all the steps from similar questions, but unfortunately, it still doesn't seem to be functioning correctly. Here i ...

htmlcsshover

Clicking on the checkbox will trigger the corresponding table column to disappear

Upon clicking the filter icon in the top right corner, a menu will open. Within that menu, there are table header values with checkboxes. When a checkbox for a specific value is selected, the corresponding table column should be hidden. I have already impl ...

javascripthtmlreactjsreduxmaterial-ui

Enhance the input field with letter control

Here is a snippet of my HTML code for inputs: <form class="form" id="firstForm" novalidate="novalidate"> <div class="tab-content"> <div class="tab-pane active" id="vtab1"> <div class="form-group" ...

jqueryhtml

Integration issue: React.js is failing to render within a Django project

I have been working on a project where React is not rendering anything on Django localhost. index.html <!DOCTYPE html> <html lang="en"> <head></head> <body> <div id="App"> <!---all will b ...

javascripthtmldjangoreactjs

I am encountering a 'Cannot GET /index.html' error when running my Node.js and Express application, even though I do not have an index.html file

I'm puzzled by the error I'm encountering. Everything runs smoothly on my local machine, but when I try running it on Linux, this error pops up. I've already created ejs files and included all necessary components. Additionally, there is no ...

htmlnode.jslinuxexpressejs

What is the best way to align an element next to another using id or class?

I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...

javascriptjquerycsstwitter-bootstrap

What could be the reason why the border of my table displays in Firefox and Chrome, but remains hidden in Internet Explorer

I am facing an issue with getting a border to display on a table in Internet Explorer versions IE6, IE7, and IE8. The border is showing up fine in Chrome and Firefox but not in the mentioned IE versions. Below is the CSS code that I have been using: #info ...

htmlcssinternet-explorerfirefox

What is the best way to align a div to the bottom of a table cell?

I need help with positioning a div inside a table cell that has 100% height. How can I align this div to the bottom of the cell? Furthermore, there are other divs within the same cell that I would like to position in the middle and at the top. ...

htmlcss

Managing the AJAX response from a remote CGI script

I'm currently working on a project that involves handling the response of a CGI script located on a remote machine within a PHP generated HTML page on an apache server. The challenge I am facing relates to user authentication and account creation for ...

javascriptphphtmlajax

What is the method for increasing the left margin of the back button on the default header in React Native?

My attempt to increase the space on the back button from the left side of the header in my React Native code has been unsuccessful. headerStyle: { paddingLeft: 60 } https://i.stack.imgur.com/0RFb0.png I also experimented with adding margin ...

htmlcssreact-nativeflexboxjsx

Is it required to double click checkboxes to uncheck them?

My checkboxes require 2 clicks to be unchecked, even though one click is enough to check them. This issue occurs in all 7 checkboxes and there is no onchange() function or similar in TS. import { Component, OnInit, Inject } from '@angular/core&apos ...

htmlcssangular

A guide to showing JSON data in reverse order on a Vue.js HTML page

Here is the order of my JSON data: {"data": {"pid": 50, , "location": {"lat": 10.0520222278408, "lon": 76.5247535705566, "state": "Kerala", "country": "India"}, "package": 0, "contact": {"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

htmljsonvue.jsvue-component

Switch up background colors for different Div Labels

I have a unique structure resembling a table using div elements. My goal is to alternate the background color of only the divLabels. Each "table row" consists of a divLabel and a divData component. Here is my attempt so far: http://jsfiddle.net/o5dv4qk ...

htmlcss

The Materialize CSS tabs are aligning vertically below each other, but functioning correctly upon refreshing the page

When using materialize css tabs, all the divs load one below the other on the initial page load. If I refresh the page, it starts behaving properly. <div class="row"> <div class="col s12"> <ul class="tabs"> <li class="tab col s ...

javascripthtmlcssreactjsmaterialize

Tips for storing multiple pieces of text in HTML5 local storage

I have been working on creating functions and input boxes within a table to display data upon page reload. However, I am encountering difficulties in understanding how to store multiple inputs in local storage and then loop through them to show all the d ...

javascripthtml

Tips for displaying a modal to a user only once

I've developed a Flask application that enables multiple users to register and log in. To achieve this, I have incorporated sessions into my code. When new users land on the initial page, they are greeted with a modal introducing them to the platform. ...

javascripthtml

What is the best way to create a dropdown menu within an iframe that appears on top of all other frames?

The code snippet below is from my frameset.jsp file: </head> <iframe width="100%" src="mail_frame.html"></iframe> <iframe width="105px" height="100%" src="sidenav.html" id="leftnav" name="leftnav" ></iframe> ...

htmlcss

What is the best way to insert a line break following a font awesome icon within a list?

My goal is to design a menu similar to LinkedIn's, featuring buttons made from icons positioned above text. However, I'm facing difficulty in inserting line breaks in CSS format after my FontAwesome icons. Despite having 'display:block' ...

htmlcssresponsive-design

What is the best method for resetting a flexbox item?

I'm trying to achieve a layout with flex box where the first item spans 100% width, the second item is centered at 50% on its own line, and the third and fourth items each take up 50% width on the same line. Usually, clearing works fine on simple blo ...

htmlcssflexbox

Adding descriptive text before a website link is a helpful way to provide context for the reader. For example

My goal is not just to have JavaScript change the URL after my page has loaded. I want to be able to enter something like 'blog.mywebsite.com' into the omnibar and have it locate my website similar to how Steam does with 'store.steampowered. ...

javascriptphphtml.htaccessweb