Using CSS, I have rearranged the content of a single row (tr) in an HTML table into two separate rows

Question

Using CSS, I have rearranged the content of a single row (tr) in an HTML table into two separate rows

I am currently facing a challenge with rearranging my table due to width constraints. My goal is to apply Jquery functions to the table in order to extract all parameters related to a product, but I want to avoid having nested tr elements or splitting parameters across multiple rows.

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

How can this be achieved?

    <table style="width: 300px">
    <thead>
        <tr>
    <th rowspan="2">Product</th>
    <th>Category</th>
    <th>Sub Category</th>
    <th>Quantity</th>
    <th>Arrival Date</th>
    <th>Manufactured Date</th>
    <th>Expiry Date</th>
        </tr>
    </thead>
    <tbody>
        <tr id="productID_1">
            <td rowspan="2">Skimmed Milk</td>
            <td>Dairy</td>
    <td>Milk</td>
    <td>1 Ltr</td>
    <td>1st Jan 2018</td>
    <td>1st Jan 2018</td>
    <td>7th Jan 2018</td>
        </tr>
        <tr id="productID_2">
            <td rowspan="2">Cheddar</td>
            <td>Dairy</td>
    <td>Cheese</td>
    <td>200 Grms</td>
    <td>1st Jan 2018</td>
    <td>1st Jan 2018</td>
    <td>15th Jan 2018</td>
        </tr>
        <tr id="productID_3">
            <td rowspan="2">Vanilla Ice Cream</td>
            <td>Desserts</td>
    <td>Ice Creams</td>
    <td>100 Grms</td>
    <td>15th Jan 2018</td>
    <td>1st Jan 2018</td>
    <td>31st March 2018</td>
        </tr>
    </tbody>
</table>

Here is a snippet of my JQuery code:

$("table#customerSalesTable tbody tr").each(function(index){ 
  // Code to capture each parameter 
}

-- Update

Based on @CodeIt's suggestion, opting not to split single row into two rows and capturing values using classes would entail significant re-editing of my JS code.

jquery html css

Answer 1

Answer №1

To enhance the display of each <tr>, consider using a CSS grid instead of traditional table rows. This approach allows you to position each cell individually within the grid structure. One drawback is that since each row functions as its own grid, column widths cannot adjust based on their content to ensure alignment.

#customerSalesTable th, #customerSalesTable td {
  border: 1px solid grey; /* visible borders */
  margin: 0 -1px -1px 0; /* "border-collapse" for non-tables */
  /* Content overflow strategy for cells with long text */
  overflow-wrap: break-word; /* or overflow: hidden if preferred */
}

#customerSalesTable tr {
  display: grid;
  grid-template:               /* Row height ▼ */
    "product category subcategory quantity" auto
    "product arrival  manufacture expiry  " auto
    /25%     25%      25%         25%; /* Define column widths */
}

/* Assigning grid areas to specific columns */
#customerSalesTable th:nth-child(1),
#customerSalesTable td:nth-child(1) { grid-area: product; }
...
... (similar assignments for other columns)
...

<table id="customerSalesTable" style="width: 300px">
  <thead>
    <tr>
      <th>Product</th> <!-- rowspan doesn't help now -->
      ...
      ... (header row definitions)
      ...
    </tr>
  </thead>
  <tbody>
    <tr id="productID_1">
      <td>Skimmed Milk</td>
      ...
      ... (data rows)
      ...
    </tr>
    ... (additional data rows)
    ...
  </tbody>
</table>

Answer 2

To enhance the display of each <tr>, consider using a CSS grid instead of traditional table rows. This approach allows you to position each cell individually within the grid structure. One drawback is that since each row functions as its own grid, column widths cannot adjust based on their content to ensure alignment.

#customerSalesTable th, #customerSalesTable td {
  border: 1px solid grey; /* visible borders */
  margin: 0 -1px -1px 0; /* "border-collapse" for non-tables */
  /* Content overflow strategy for cells with long text */
  overflow-wrap: break-word; /* or overflow: hidden if preferred */
}

#customerSalesTable tr {
  display: grid;
  grid-template:               /* Row height ▼ */
    "product category subcategory quantity" auto
    "product arrival  manufacture expiry  " auto
    /25%     25%      25%         25%; /* Define column widths */
}

/* Assigning grid areas to specific columns */
#customerSalesTable th:nth-child(1),
#customerSalesTable td:nth-child(1) { grid-area: product; }
...
... (similar assignments for other columns)
...

<table id="customerSalesTable" style="width: 300px">
  <thead>
    <tr>
      <th>Product</th> <!-- rowspan doesn't help now -->
      ...
      ... (header row definitions)
      ...
    </tr>
  </thead>
  <tbody>
    <tr id="productID_1">
      <td>Skimmed Milk</td>
      ...
      ... (data rows)
      ...
    </tr>
    ... (additional data rows)
    ...
  </tbody>
</table>

Answer 3

Answer №2

Implementing JQuery

In each <tr> tag, there are 7 child nodes. By wrapping child nodes 1-4 and 5-7 with separate <tr> tags, the cells can be rearranged.

For instance:

Initially:

<tr>
    <th>Product</th>
    <th>Category</th>
    <th>Sub Category</th>
    <th>Quantity</th>
    <th>Arrival Date</th>
    <th>Manufactured Date</th>
    <th>Expiry Date</th>
</tr>

After:

<tr>
    <th>Product</th>
    <tr>
        <th>Category</th>
        <th>Sub Category</th>
        <th>Quantity</th>
    </tr>
    <tr>
        <th>Arrival Date</th>
        <th>Manufactured Date</th>
        <th>Expiry Date</th>
    </tr>
</tr>

// code to wrap table headers
var e = $('th').slice(1, 4);
e.wrapAll("<tr/>");
var e = $('th').slice(-3);
e.wrapAll("<tr/>");

// code to wrap table rows
var e = $('td').slice(1, 4);
e.wrapAll("<tr/>");
var e = $('td').slice(4, 7);
e.wrapAll("<tr/>");
var e = $('td').slice(8, 11);
e.wrapAll("<tr/>");
var e = $('td').slice(11, 14);
e.wrapAll("<tr/>");
var e = $('td').slice(15, 18);
e.wrapAll("<tr/>");
var e = $('td').slice(18, 21);
e.wrapAll("<tr/>");

// use #productID_* to capture parameters 
var e = $('#productID_2').find('td');
console.log(e);

td,
th {
  width: 100px !important; // sets cell width
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border-collapse: collapse;" border=1>
  <thead>
    <tr>
      <th>Product</th>
      <th>Category</th>
      <th>Sub Category</th>
      <th>Quantity</th>
      <th>Arrival Date</th>
      <th>Manufactured Date</th>
      <th>Expiry Date</th>
    </tr>
  </thead>
  <tbody>
    <tr id="productID_1">
      <td>Skimmed Milk</td>
      <td>Dairy</td>
      <td>Milk</td>
      <td>1 Ltr</td>
      <td>1st Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>7th Jan 2018</td>
    </tr>
    <tr id="productID_2">
      <td>Cheddar</td>
      <td>Dairy</td>
      <td>Cheese</td>
      <td>200 Grms</td>
      <td>1st Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>15th Jan 2018</td>
    </tr>
    <tr id="productID_3">
      <td>Vanilla Ice Cream</td>
      <td>Desserts</td>
      <td>Ice Creams</td>
      <td>100 Grms</td>
      <td>15th Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>31st March 2018</td>
    </tr>
  </tbody>
</table>

Answer 4

Implementing JQuery

In each <tr> tag, there are 7 child nodes. By wrapping child nodes 1-4 and 5-7 with separate <tr> tags, the cells can be rearranged.

For instance:

Initially:

<tr>
    <th>Product</th>
    <th>Category</th>
    <th>Sub Category</th>
    <th>Quantity</th>
    <th>Arrival Date</th>
    <th>Manufactured Date</th>
    <th>Expiry Date</th>
</tr>

After:

<tr>
    <th>Product</th>
    <tr>
        <th>Category</th>
        <th>Sub Category</th>
        <th>Quantity</th>
    </tr>
    <tr>
        <th>Arrival Date</th>
        <th>Manufactured Date</th>
        <th>Expiry Date</th>
    </tr>
</tr>

// code to wrap table headers
var e = $('th').slice(1, 4);
e.wrapAll("<tr/>");
var e = $('th').slice(-3);
e.wrapAll("<tr/>");

// code to wrap table rows
var e = $('td').slice(1, 4);
e.wrapAll("<tr/>");
var e = $('td').slice(4, 7);
e.wrapAll("<tr/>");
var e = $('td').slice(8, 11);
e.wrapAll("<tr/>");
var e = $('td').slice(11, 14);
e.wrapAll("<tr/>");
var e = $('td').slice(15, 18);
e.wrapAll("<tr/>");
var e = $('td').slice(18, 21);
e.wrapAll("<tr/>");

// use #productID_* to capture parameters 
var e = $('#productID_2').find('td');
console.log(e);

td,
th {
  width: 100px !important; // sets cell width
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border-collapse: collapse;" border=1>
  <thead>
    <tr>
      <th>Product</th>
      <th>Category</th>
      <th>Sub Category</th>
      <th>Quantity</th>
      <th>Arrival Date</th>
      <th>Manufactured Date</th>
      <th>Expiry Date</th>
    </tr>
  </thead>
  <tbody>
    <tr id="productID_1">
      <td>Skimmed Milk</td>
      <td>Dairy</td>
      <td>Milk</td>
      <td>1 Ltr</td>
      <td>1st Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>7th Jan 2018</td>
    </tr>
    <tr id="productID_2">
      <td>Cheddar</td>
      <td>Dairy</td>
      <td>Cheese</td>
      <td>200 Grms</td>
      <td>1st Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>15th Jan 2018</td>
    </tr>
    <tr id="productID_3">
      <td>Vanilla Ice Cream</td>
      <td>Desserts</td>
      <td>Ice Creams</td>
      <td>100 Grms</td>
      <td>15th Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>31st March 2018</td>
    </tr>
  </tbody>
</table>

Using CSS, I have rearranged the content of a single row (tr) in an HTML table into two separate rows

Answer №1

Answer №2

Similar questions

What could be causing the 500 internal error in my AJAX code?

The date range picker displays the previous arrow but not the next arrow

extracting the data from the URL parameter and showing it on the screen

Server side Meteor with reactive coffee on client

Overriding the Ajax URL

Numerous data points contained within a single cell of a table

The JSON data response is not being properly displayed on the div element

What is the best way to use CSS to center two blocks with space in between them?

How can I delete a CSS class from an element?

Having trouble with Bootstrap dropdowns not opening when clicking with jQuery?

SASS - centering timeline content vertically

Step-by-step guide for implementing tooltips using jQuery

Include a hyperlink in an email using PHP

Instructions on setting div opacity when Overflow is set to visibleExplanation on setting opacity for div with Overflow

HTML/CSS Inactive: Troubleshooting and Solutions

JavaScript/jQuery: What is the best way to assign an element as the context ('this') of a function?

Should the potential benefits of implementing Responsive Design in IE8 be taken into account in 2013?

Tips for inserting the final array into the designated div

Vue.js - Including new information in an array and passing it to the props (assistance needed)

Having trouble loading external CSS in HTML?