Is there a way to create a table that has varying columns for each row?

I am currently working with bootstrap4 and I am trying to create a table that has 3 columns in the first row and 4 columns in the following two rows. I want it to look like this:

https://i.sstatic.net/nuI55.png

Here is my existing table:

<link href="https://cdn.usebootstrap.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-bordered">
  <tbody>
    <tr>
      <td width="25%">1П</td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">2П</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">Прод.</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>
  </tbody>
</table>

htmlcssbootstrap-4html-table

Answer №1

Your code is generating a table that may appear incomplete in some browsers, which could lead to unexpected results. To address this issue, you can simply add another cell in the first row, leave it empty, and make its border invisible:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
}

tr:first-of-type>td:last-child {
  border: none;
}
<table class="table table-bordered table-bordered">
  <tbody>
    <tr>
      <td width="25%">1П</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">2П</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>

    <tr>
      <td width="25%">Прод.</td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
    </tr>
  </tbody>
</table>

Answer №2

Bootstrap offers a range of predefined classes.

To achieve a specific design, the table-bordered class should be removed from the table element, and the border class should be added to the td elements.

<link href="https://cdn.usebootstrap.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table m-5 w-50"><!-- for demonstration only, use of w-50 and m-5 classes is optional-->
  <tbody>
    <tr>
      <td width="25%" class="border">1П</td>
      <td width="25%" class="border"></td>
      <td width="25%" class="border"></td>
    </tr>

    <tr>
      <td width="25%" class="border">2П</td>
      <td width="25%" class="border"></td>
      <td width="25%" class="border"></td>
      <td width="25%" class="border"></td>
    </tr>

    <tr>
      <td width="25%" class="border">Прод.</td>
      <td width="25%" class="border"></td>
      <td width="25%" class="border"></td>
      <td width="25%" class="border"></td>
    </tr>
  </tbody>
</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

How to select the final td element in every row using JQuery or JavaScript, excluding those with a specific class

I am looking for a solution with my HTML table structure: <table> <tbody> <tr> <td>1</td> <td>2</td> <td class="treegrid-hide-column">3</td> < ...

javascriptjqueryhtmlcss

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

I am having trouble getting my localhost node.js server to load in any browser. There are no errors, just a buffering symbol on the screen. The code works fine in VS Code. Here is what I have: server.js code: const http = require("http"); const ...

javascripthtmlnode.jsexpresslocalhost

Sorting through various data inputs in one JSON file

I have a JSON file containing an array of objects: obj= [{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"t ...

javascripthtmlreactjsuitableviewmaterial-ui

If the content within a <div> element exceeds the available width, a horizontal scrollbar will be displayed

I have a scenario where I am using an absolute div to overlap another div. The div that overlaps is the absolute one (.content), and if the overlapped div (.left) doesn't fit the screen width, a horizontal scroll bar does not appear. How can I automat ...

htmlcss

Ways to incorporate a notification feature with an icon or image

I'm looking to create a visually dynamic icon/image similar to mobile device notifications, but primarily for desktop use. This image will be positioned before some text. For instance: https://i.sstatic.net/MHocy.pngSome Text This design features tw ...

htmlcssangulartwitter-bootstrap-3

incorporating video content onto a webpage

Let me provide more details for better understanding. Currently, the website is not operational yet. Once it's live, I'll be hosting it on a platform like YouTube. The issue I encountered was when trying to embed a video using the code below: & ...

htmlvideophotos

I require help with my digital greeting card

Apologies for any language errors in advance. I'm almost done with my first "online-card" project, but I've hit a frustrating issue. I can't seem to remove the gap between the footer and the tab-content (the Hungarian version is fine). I&apo ...

twitter-bootstrapcssflexboxbootstrap-4

Utilizing data attributes over classes for styling in CSS

Programming Languages <span data-bar> ... </span> JavaScript span[data-bar]{ ... } Do you agree with this coding practice? Are there any potential pitfalls? I believe implementing the data- attribute is beneficial when dealing with a large ...

csshtmlcustom-data-attribute

Identify whether the page is being accessed through the Samsung stock browser or as an independent web application

Hey there! I am on a mission to determine whether my webpage is being accessed through Samsung's default browser or as a standalone web app saved on the homescreen. Unfortunately, the javascript codes I have come across only seem to work for Safari an ...

javascripthtmlcssweb-applicationssamsung-mobile

Remove a Row from a Table by Clicking a Button with Ajax

I currently have an HTML table with 4 columns: SKU Group, Group_ID, Edit button, and Delete button. My focus at the moment is on implementing the delete functionality. I want it so that when the delete button is clicked, a confirmation box appears. If "OK" ...

javascriptphphtmlajaxsql-delete

The stop-color property is not functioning as expected in CSS/SVG

Here is the code I am currently working with: <?xml version="1.0" standalone="yes"?> <svg xmlns="http://www.w3.org/2000/svg" width="360" height="240"> <style>stop{stop-opacity:1}circle{fill:url(#r)}</style> <defs> <radialG ...

csssvg

Steps for setting up dart sass on Fedora 37

I'm facing difficulties while trying to install Dart Sass on my Fedora 37 system. Despite following the official instructions and watching several tutorials, I keep encountering an error. According to the official Sass website: You can install Sass ...

csssass

Ensure a div stays on a single line when viewed in Internet Explorer

My current setup is structured in the following way. <div id="header"> <div id="heading">Title</div> <div id="flow"> Enter Something: <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" /> &l ...

jqueryhtmlcss

Issue with form submission using getElementById

I am struggling to submit a form that is generated by PHP echo. The getElementById function doesn't seem to be functioning properly. <?php include 'connect.php' ; $sql=mysql_query("SELECT mess_id,receiver,subject ...

phphtmlformspostgetelementbyid

Achieving consistent column widths in a Table with ReactJS and MaterialUI

My goal with ReactJS and MaterialUI is to ensure all columns in a Table have the same width. Surprisingly, without setting any specific widths, the last column always ends up narrower than the rest. To illustrate this issue, I created a sample on codesand ...

reactjshtml-tablematerial-ui

Altering the background color of the navigation bar when scrolling

So, my navigation bar starts with a transparent background, but I wanted it to change to a different background color when a user scrolls down. I found a solution in this question: Changing nav-bar color after scrolling? My current code now looks like th ...

jquerycss

"Enhancing Your List Design: Customizing CSS for Hover Effects on Images

I'm currently working on a CSS/HTML list that utilizes an image as the background and changes to a different image when hovered over. However, I've encountered an issue where the hover image is not aligning properly, leaving a noticeable gap. T ...

htmlcss

Navigating through an array of images using ng-repeat

I am attempting to iterate through the image array and have each image correspond to a separate li. Despite using the variable "image" as my identifier, I am encountering difficulties looping through the array. The line that I am trying to modify is as fol ...

angularjshtml

Symbol adjacent to button with multiple lines

My objective is to design a button with multi-line text and an icon positioned centrally next to it for both lines. Refer to the screenshot below for clarification: https://i.sstatic.net/ODPI2.png Despite my efforts, I am encountering difficulty in cente ...

htmlcss

Tips for changing the default height of Elastic UI dropdown menus

I am attempting to adjust the height of the Task combobox to match that of the Date Picker, but the styling is not being applied when done through a class or inline. https://i.sstatic.net/3Cua1.png I have tried inline styling the element as: <EuiForm ...

cssreactjssass