How to add title for div class container instead of using h3 tag ?

Question

I work on asp.net razor page i face issue i can't add title for div class container and title must be with top border  exactly as field set and legend  so how to apply title to be part from top border using html and css and jquery 

<table style="border:1px solid 
black">
     <tr>
         <td style="width:300px;height:200px;">
             <div id="classesContainer">

                  <h2>Classes</h2>
                 <div id="classesList" class="scrollable-list" style="padding-top:5px; margin-top:10px;width:300px;height:200px;">
                 </div>
             </div>
         </td>

     </tr>
 </table>

  <style>
      .scrollable-list {
          overflow-y: auto;
          max-height: 200px;
          width: 180px;
      }
</style>

and to fill div class container and classlist with data i use jquery below so how to assign title for div classcontainer ?

$('#btnDisplay').click(function (event) {
     event.preventDefault();
     $('#classesContainer').attr('title', 'Classes');

     var dropdown = $('#accountclassname-select');
     dropdown.empty();

     $.ajax({
         url: '?handler=AccountClassName',
         type: "GET",
         dataType: "json",
         success: function (response) {
             $('#classesContainer').show();
             $('#classesList').html(''); // Clear existing classes
             $('#classesList').append('<input type="checkbox" id="checkall" class="chkall"  value="0" /><span> All </span> <br />');

             $.each(response, function (i, classes) {
                 var checkbox = $('<input type="checkbox" class="classCheckbox" value="' + classes.classAccountId + '" />');
                 var span = $('<span>' + classes.classAccountName + '</span>');
                 var listItem = $('<div></div>').append(checkbox, span);
                 $('#classesList').append(listItem);
             });

         }
     });
 });

Answer 1

Thanks for posting your question in the Microsoft Q&A forum.

<table style="border:1px solid 
black">
     <tr>
         <td style="width:300px;height:200px;">
             <div id="classesContainer">

                  <h2 class="custom-title">Classes</h2>
                 <div id="classesList" class="scrollable-list" style="padding-top:5px; margin-top:10px;width:300px;height:200px;">
				
                 </div>
             </div>
         </td>

     </tr>
 </table>

  <style>
      .scrollable-list {
          overflow-y: auto;
          max-height: 200px;
          width: 180px;
      }
	  
	  .classesContainer {
            border: 1px solid #ccc;
            padding: 10px;
            position: relative;
        }

        .custom-title {
            background-color: #fff;
            padding: 0 10px;
            position: absolute;
            top: -22px;
        }
</style>

Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful