Question

0

136

Visualizações

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 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

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

136

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

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT