Search code examples
c#htmldatatableblazor

Multiple values under single Table cell


I am currently creating a website, but I am uncertain how to tackle this problem. I am trying to create a display for a DataTable using HTML and C#, that should be sortable, but I would like to do something specific.

I have a list of objects that contains a Name and a Value, both are strings. I was wondering whether it is possible to insert multiple values (Name) under a single cell, but also making it possible to show the Value while hovering over the name.

Example DataTable

Here is an example I made in Excel, where a row contains multiple values. The underlined String should be hoverable and show the Value as tooltip.


Solution

  • HTML: Both rowspan and tooltip added.   
     <body>
             <table style="width:100%">
              <tr>
                <th>Name</th>
                <td>Jill</td>
                <td>Jill</td>
              </tr>
              <tr>
                <th rowspan="3">Phone</th>
                <td class="tooltip">555-1234 <span class="tooltiptext">Tooltip text</span></td>
                <td>555-1234</td>
              </tr>
              <tr>
                <td class="tooltip">555-1234 <span class="tooltiptext">Tooltip text</span></td>
                <td></td>
              </tr>
               <tr>
                 <td class="tooltip">555-1234 <span class="tooltiptext">Tooltip text</span></td>
                <td></td>
              </tr>
               <tr>
                <th>Phone</th>
                <td>555-1234</td>
                <td>555-1234</td>
              </tr>
              </table>
               
               <div class="tooltip">Hover over me
              <span class="tooltiptext">Tooltip text</span>
                </div>
               
              <script src="script.js"></script>
            </body>
           
    CSS:
    
    table, th, td {
      border:1px solid black;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
    
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }