Question

0

131

Views

Get the identifying header from a table with rowspans and column spans

Assuming I have a table with column and row spans I am looking for a way to find the header that uniquely identifies a cell.

For this table:

table {
  border-collapse: collapse;
 }
 
 table, td, th {
   border: 1px solid gray;
 }

<table>
  <thead>
    <tr>
      <th colspan="2">col1</th>
      <th rowspan="2">col2</th>
      <th rowspan="3">col3</th>
    </tr>
    <tr>
      <th>col4</th>
    </tr>
    <tr>
      <th colspan="2">col5</th>
      <th>col7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>value</td>
      <td>value1</td>
      <td>value2</td>
      <td>value3</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/j3kqrpt0/

I would like to get the following header

col5	col5	col3	col7

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-25T02:12:53.540Z

Basically, all you have to do is -

Inside table, create thead element, which stands for table head
Create new table row - tr, which is going to be filled with column headers that you need
And lastly, add those th (table header) elements that you need.

Then, in the body of the table you go the same way, just with different elements:

Create tbody element
Create tr element
Fill tr with table data - td

Here is the code snippet.

table, th, td {
  border: 1px solid;
}

<table>
<thead>
 <tr>
   <th>col5</th>
   <th>col5</th>
   <th>col3</th>
   <th>col7</th>
 </tr>
     </thead>
      <tbody>
 <tr>
   <td>value</td>
   <td>value1</td>
   <td>value2</td>
   <td>value3</td>
 </tr>
</tbody>
</table>

0

131

Get the identifying header from a table with rowspans and column spans

1 answers

0

Find remote jobs

Andres GPT