Merge Two HTML Table Cells

Merge two HTML table cells

Set the colspan attribute to 2.

...but please don't use tables for layout.

Merge HTML table cells, that have the same value and are in the same row

Assuming you had this HTML:

    <table id="table">
        <tr>
            <td colspan="1">A</td>
            <td colspan="1">A</td>
            <td colspan="1">A</td>
            <td colspan="1">B</td>
        </tr>
        <tr>
            <td colspan="1">C</td>
            <td colspan="1">B</td>
            <td colspan="1">B</td>
            <td colspan="1">B</td>
        </tr>
        <tr>
            <td colspan="1">C</td>
            <td colspan="1">C</td>
            <td colspan="1">D</td>
            <td colspan="1">E</td>
        </tr>
    </table>

You could do something similar to this in JS to merge the cells:

'use strict';

const deep = true;
const tableEl = document.getElementById('table').cloneNode(deep);
const nodesToRemove = [];

for (const childRow of tableEl.children) {
    let currNode = undefined;
    for (const td of childRow.children) {
        let lastNode = (currNode) ? currNode.cloneNode(deep) : undefined;
        currNode = td;
        if (lastNode && (lastNode.innerText === currNode.innerText)) {
            let colSpanVal = lastNode.getAttribute('colspan');
            currNode.setAttribute('colspan', Number(colSpanVal) + 1);
            lastNode = currNode.cloneNode(deep);
            nodesToRemove.push(currNode.previousElementSibling);
        }
    }
}

for (const node of nodesToRemove) {    
    node.remove();
}

document.getElementById('table').replaceWith(tableEl);

How to merge 2 row cells in data table?

The first cell text should be in the upper header, not in the second.

library(DT)
library(shiny)
library(dplyr)
library(htmltools)
library(data.table)

data <- 
  data.frame(
    ID = c(1,1,1,2,2,2,3,3,3),
    Period = c(1, 2, 3, 1, 2, 3, 1, 2, 3),
    Values = c(5, 10, 15, 0, 2, 4, 3, 6, 9),
    State = c("X0","X1","X2","X0","X2","X0", "X2","X1","X0")
  )

numTransit <- function(x, from=1, to=3){
  setDT(x)
  unique_state <- unique(x$State)
  all_states <- setDT(expand.grid(list(from_state = unique_state, to_state = unique_state)))
  dcast(x[, .(from_state = State[from], 
              to_state = State[to]), 
          by = ID]
        [,.N, c("from_state", "to_state")]
        [all_states,on = c("from_state", "to_state")], 
        to_state ~ from_state, value.var = "N"
  )
}

ui <- fluidPage(
  tags$head(tags$style(".datatables .display {margin-left: 0;}")), # < left-align the table
  h4(strong("Base data frame:")), 
  tableOutput("data"),
  h4(strong("Transition table inputs:")),
  numericInput("transFrom", "From period:", 1, min = 1, max = 3),
  numericInput("transTo", "To period:", 2, min = 1, max = 3),
  h4(strong("Output transition table:")), 
  DTOutput("resultsDT"),
)

server <- function(input, output, session) {
  results <- 
    reactive({
      results <- numTransit(data, input$transFrom, input$transTo) %>% 
        replace(is.na(.), 0) %>%
        bind_rows(summarise_all(., ~(if(is.numeric(.)) sum(.) else "Sum")))
      results <- cbind(results, Sum = rowSums(results[,-1]))
    })
  
  output$data <- renderTable(data)
  
  output$resultsDT <- renderDT(server=FALSE, {
    req(results())
    datatable(
      data = results(),
      rownames = FALSE,
      filter = 'none',
      container = tags$table(
        class = 'display',
        tags$thead(
          tags$tr(
            tags$th(rowspan = 2, colnames(results())[1], style = "border-right: solid 1px;"),
            tags$th(colspan = 10, sprintf('From state where initial period = %s', input$transFrom))
          ),
          tags$tr(
            mapply(tags$th, colnames(results())[-1], style = sprintf("border-right: solid %spx;", rep(0, ncol(results()) - 1L)), SIMPLIFY = FALSE)
          )
        )
      ),
      options = list(scrollX = F
                     , dom = 'ft'
                     , lengthChange = T
                     , pagingType = "numbers"  # hides Next and Previous buttons
                     , autoWidth = T
                     , info = FALSE #  hide the "Showing 1 of 2..." at bottom of table
                     , searching = FALSE  # removes search box
      ),
      class = "display"
    ) %>%
      formatStyle(c(1), `border-right` = "solid 1px")
  })
  
}

shinyApp(ui, server)

Sample Image

How to merge rows and columns in HTML table

.table {
    max-width: 700px;
    height: auto;
    margin: 20px auto;
    background-color: #edd;
    position: relative;
}

.table-head {
    display: flex;
    height: 150px;
}

.table-head-box {
    width: 25%;
    background-color: #000;
    border: 1px solid red;
    color: #fff;
}

.table-body {
    display: flex;
    flex-direction: row;
    height: 100%;
    height: 600px;
}

.table-body-left,
.table-body-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.table-body-left {
    width: 100%;
    height: 100%;
}
.table-body-right {
    width: 100%;
    height: 100%;
}

.table-head-box,
.table-body-left-top,
.table-body-left-bottom,
.table-body-right-top,
.table-body-right-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
}

.table-body-left-top,
.table-body-left-bottom,
.table-body-right-top,
.table-body-right-bottom {
    border: 1px solid blue;
}

.table-body-left-top,
.table-body-right-bottom {
    height: 70%;
    width: 100%;
}

.table-body-right-top,
.table-body-left-bottom{
    height: 30%;
    width: 100%;
}
<div class="table">
    <div class="table-head">
        <div class="table-head-box">A</div>
        <div class="table-head-box">B</div>
        <div class="table-head-box">C</div>
        <div class="table-head-box">D</div>
    </div>
    <div class="table-body">
        <div class="table-body-left">
            <div class="table-body-left-top">E,I,F,G</div>
            <div class="table-body-left-bottom">M,N</div>
        </div>
        <div class="table-body-right">
            <div class="table-body-right-top">G,H</div>
            <div class="table-body-right-bottom">K,O,L,P</div>
        </div>
    </div>
</div>

Merging two cells HTML table

If you only expect two phones this could be accomplished like this:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Creating an HTML Table, with merged columns

You can merge two or more table cells together by using the colspan attribute in a <td> HTML tag (table data). For example, in the below code is a table with three rows and three columns. If we wanted to combine the first two cells into one cell, we could use the colspan="2" attribute in the first <td> tag. The number represents how many cells you want to use for the <td> tag.

Refer this link for example
http://www.computerhope.com/issues/ch001655.htm

How to merge two rows of a HTML table?

I think you just need to move your headings from the tbody, into the theader and then add a couple of normal columns to the tbody to replace the headings we just moved (comments in code as to what I have moved and added):

<table class="table table-bordered table-hover table-condensed table-responsive">  <thead>    <tr>      <th class="tg-yw4l" rowspan="2">Level</th>      <th class="tg-yw4l" rowspan="2">Name of Examination</th>      <th class="tg-yw4l" rowspan="2">Year of Study</th>      <th class="tg-yw4l" rowspan="2">Group /Subject</th>      <th class="tg-yw4l" rowspan="2">Division/ Class/Grade</th>      <th class="tg-yw4l" colspan="2">Grade</th>      <th class="tg-yw4l" rowspan="2">Board /University</th>      <th class="tg-yw4l" rowspan="2">Year of Passing [yyyy]      </th>      <th class="tg-yw4l" rowspan="2">Result Published by Controller of Exam [dd/mm/yyyy]</th>    </tr>
    <!-- put your other two headers from tbody here: -->    <tr>      <th>GPA/CGPA</th>      <th>Out of</th>    </tr>

  </thead>  <tbody>    <tr>      <td>        SSC/Equivalent      </td>      <td>        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="SSC">SSC</option>          <option value="Dakhil">Dakhil</option>          <option value="O Level">O Level</option>        </select>      </td>      <td>
      </td>      <td>        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="Science">Science</option>          <option value="Arts">Arts</option>          <option value="Commerce">Commerce</option>          <option value="Business Studies">Business Studies</option>          <option value="Humanities">Humanities</option>          <option value="Others">Others</option>        </select>      </td>      <td>        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="First">First</option>          <option value="Second">Second</option>          <option value="Third">Third</option>          <option value="Grade">Grade</option>        </select>      </td>

    <!-- replace those headers we have moved with a couple of normal columns: -->
      <td>        [CONTENT]      </td>      <td></td>

      <td>        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">      </td>      <td>        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">      </td>      <td>        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">      </td>    </tr>    <tr>      <td>        HSC/Equivalent      </td>      <td>        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="SSC">SSC</option>          <option value="Dakhil">Dakhil</option>          <option value="O Level">O Level</option>        </select>      </td>      <td>
      </td>      <td>        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="Science">Science</option>          <option value="Arts">Arts</option>          <option value="Commerce">Commerce</option>          <option value="Business Studies">Business Studies</option>          <option value="Humanities">Humanities</option>          <option value="Others">Others</option>        </select>      </td>      <td>        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="First">First</option>          <option value="Second">Second</option>          <option value="Third">Third</option>          <option value="Grade">Grade</option>        </select>      </td>      <td>        [CONTENT]      </td>      <td></td>      <td>        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">      </td>      <td>        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">      </td>      <td>        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">      </td>    </tr>    <tr>      <td>        Graduation      </td>      <td>        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="SSC">SSC</option>          <option value="Dakhil">Dakhil</option>          <option value="O Level">O Level</option>        </select>      </td>      <td>        <select name="Gradnoyear" id="Gradnoyear" class="breadcrumbcombo1" tabindex="38" style="visibility: visible;">          <option value="-1" selected="selected">--Select--</option>          <option value="4">4</option>          <option value="5">5</option>        </select>      </td>      <td>        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="Science">Science</option>          <option value="Arts">Arts</option>          <option value="Commerce">Commerce</option>          <option value="Business Studies">Business Studies</option>          <option value="Humanities">Humanities</option>          <option value="Others">Others</option>        </select>      </td>      <td>        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="First">First</option>          <option value="Second">Second</option>          <option value="Third">Third</option>          <option value="Grade">Grade</option>        </select>      </td>      <td>        [CONTENT]      </td>      <td></td>      <td>        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">      </td>      <td>        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">      </td>      <td>        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">      </td>    </tr>    <tr>      <td>        Post Graduation      </td>      <td>        <select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="SSC">SSC</option>          <option value="Dakhil">Dakhil</option>          <option value="O Level">O Level</option>        </select>      </td>      <td>
      </td>
      <td>        <select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="Science">Science</option>          <option value="Arts">Arts</option>          <option value="Commerce">Commerce</option>          <option value="Business Studies">Business Studies</option>          <option value="Humanities">Humanities</option>          <option value="Others">Others</option>        </select>      </td>      <td>        <select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">          <option value="-1">--Select--</option>          <option value="First">First</option>          <option value="Second">Second</option>          <option value="Third">Third</option>          <option value="Grade">Grade</option>        </select>      </td>      <td>        [CONTENT]      </td>      <td></td>      <td>        <input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">      </td>      <td>        <input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">      </td>      <td>        <input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">      </td>    </tr>  </tbody></table>

Merge neighbouring HTML table cells with same value using JS

You were indeed pretty close!

A way to simplify quite a bit is to keep a reference to the current "header" cell, i.e. the one you want to increase the rowspan of. That way you don't have to deal with indexes at all, yielding a very straightforward algorithm:

  • For each row

    • Set firstCell to the row's first cell

    • If this is the first row OR firstCell's text is different from headerCell's text

      • Set headerCell to firstCell
    • Otherwise

      • Increase headerCell's rowSpan by 1
      • Remove firstCell

In JavaScript, it looks like this:

const table = document.querySelector('table');
let headerCell = null;
for (let row of table.rows) {  const firstCell = row.cells[0];    if (headerCell === null || firstCell.innerText !== headerCell.innerText) {    headerCell = firstCell;  } else {    headerCell.rowSpan++;    firstCell.remove();  }}
table, tr, td {  border: solid 1px black;}
<table>  <tr>    <td>fish</td>    <td>salmon</td>  </tr>  <tr>    <td>fish</td>    <td>cod</td>  </tr>  <tr>    <td>fish</td>    <td>plaice</td>  </tr>  <tr>    <td>bird</td>    <td>robin</td>  </tr>  <tr>    <td>bird</td>    <td>crow</td>  </tr></table>

Related Topics

Flexbox Affects Overflow-Wrap Behavior

How to View an HTML File in the Browser with Visual Studio Code

How to Disable the Resize Grabber of <Textarea>

Disable the Horizontal Scroll

How to Change the Opacity (Alpha, Transparency) of an Element in a Canvas Element

How to Get the Collection of Model State Errors in ASP.NET MVC

How to Make in CSS an Overlay Over an Image

How to Center an Iframe Horizontally

What Do <Form Action="#"> and <Form Method="Post" Action="#"> Do

CSS Image Resize Percentage of Itself

Heading with Horizontal Line on Either Side

Aligning Decimal Points in HTML

How to Vertically Center a Bootstrap Carousel-Caption

Why Does My Transform Snap Back

Make Row Stretch Across All Columns in CSS Grid

How to Add a Tool Tip to a Span Element

Is Cross-Origin Postmessage Broken in Ie10

Masking Image with CSS


Leave a reply



Submit