Add single DIV or SPAN for multiple TD in HTML table across TRs-CodePudding

Is it possible to add single DIV or SPAN for multiple TD in HTML table across multiple TRs?

<table>
  <tr>
     <td> </td>
     **<td> </td>**
  </tr>
  <tr>
     <td> </td>
     **<td> </td>**
  </tr>
</table>

I want to highlight group of TDs (div) with border using JavaScript and CSS.

CodePudding user response：

If you are highlighting full rows, you could put them in a tbody. This would be the easiest.

Else, your best bet is to give your highlighted td a css class and carefully write the styles for the borders to apply.

If you absolutely want a div, your only option is to absolute position it over the table and give it its position attributes through js by calculating the cell boundaries, this is gonna be fun, but more work.

CodePudding user response：

there is the way to highlight a Table Data or Table Rows:

HTML:
 

`<table>
 <div >    
 <tr>
          <td>hello</td>
          <td>hel</td>
          <td>he</td>
  
        </tr>
        <tr>

          <td>hello</td>
          <td>hel</td>
          <td>he</td>

        </tr>
      </div>
      </table>


CSS:

    datas,tr,td{
    border:1px solid black;
}
td:hover{
    background-color: green;
    color: white;
}

CodePudding user response：

I found a solution using a class .highlight that generates a pseudo-element in the tr element.
This will create the continuously highlight effect you are looking for:

HTML

<table>
  <tr >
     <td> 1</td>
     <td> 2</td>
  </tr>
  <tr>
     <td> 3</td>
     <td> 4</td>
  </tr>
  <tr >
     <td>5</td>
     <td>6</td>
  </tr>
  <tr>
     <td> 7</td>
     <td> 8</td>
  </tr>
</table>

CSS

table{
  position: relative;
  text-align: center;
}

td {
  width: 200px;
  height: 100px;
  background-color: lightgray;
}

.highlight td {
  border-collapse: separate;
  border-spacing: 0;
  background: none;
  border: none;
  position: relative;
  z-index: 2;
}

.highlight::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px; /* this must be the same height of td */
  background-color: red;
  border: 1px solid darkred;
  z-index: 1;
}