Skip to Content

How do I completely remove the header from the table?

I'm having trouble removing the table header completely. I am able to hide the header with visibility: hidden but that just hides the contents of the header. The header is still taking up space. I've also tried adding height: 0px !important to try getting rid of it but that does nothing. How do I remove the header? Here is the fiddle: https://jsfiddle.net/8nmw4ez3/.

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

3 Answers

  • Best Answer
    May 20 at 10:47 PM

    Hi Betty, I modified your css code. Hope this will help you -> https://jsfiddle.net/cbveg67o/

    .sapMListTblHeader {
      visibility: collapse;
    }
    

    Regards,

    Karthik Arjun

    Add comment
    10|10000 characters needed characters exceeded

    • Adding few more inputs!

      I recommend you to use custom css, to change standard css from SAPUI5 is not a good practice.

      Following code can help you to understand better!

      https://jsfiddle.net/uyq01xkn/

      CSS:
      .mytable .sapMListTblHeader {
        visibility: collapse;
      }
      Table:
      
      		var table =  new sap.m.Table({
      			columns:[
      			         new sap.m.Column({
      			        	header:new sap.m.Label({text:"sl no"}), 
      			         }),
      			         
      			         new sap.m.Column({
      			        	 header:new sap.m.Label({text:"name"}),
      				         }),
      				         
      				         new sap.m.Column({
      				        	 header:new sap.m.Label({text:"age range"})
      					         }),
      					   
      					         new sap.m.Column({
      					        	 header:new sap.m.Label({text:"age"})
      						         }),
      						   
      			         ]
      		}).addStyleClass("mytable");
      
  • May 21 at 03:11 AM

    I don't know... why not avoid setting headers on each column like below?

    var table =  new sap.m.Table({
      columns:[
        new sap.m.Column({
          //header:new sap.m.Label({text:"sl no"}), 
        }),
        new sap.m.Column({
          //header:new sap.m.Label({text:"name"}),
        }),
        new sap.m.Column({
          //header:new sap.m.Label({text:"age range"})
        }),
        new sap.m.Column({
          //header:new sap.m.Label({text:"age"})
        }),
      ]
    });

    I don't feel good on manipulating SAPUI5 controls thru CSS attribute.

    Add comment
    10|10000 characters needed characters exceeded

  • May 21 at 05:28 AM

    Hi Betty,

    .hideTableHeader .sapMListTblHeader { display: none;}

    Apply hideTableHeader CSS class to your table class="hideTableHeader"

    If you give apply it to sapMListTblHeader directly then it will remove columns for all the tables with in your application which is not a good practice.

    Regards,

    Viswa

    Add comment
    10|10000 characters needed characters exceeded