JSFiddle - React, Tailwind, and code Playground
by nithyanandam venu
HTML
<div class="sapzencrosstab-FontSize-MainMode sapzencrosstab-CrosstabComponent zenControl " id="CROSSTAB_1" style="width: 100%; height: 100%; overflow: hidden;" data-sap-ui="CROSSTAB_1"><div class="sapzencrosstab-TableDiv sapzencrosstab-TableDivBackground" id="CROSSTAB_1_altRenderModeTableDiv" style="width: 100%; height: 203px; visibility: visible;"><div id="CROSSTAB_1_hScrollDiv" style="width: 1346px; height: 16px; bottom: 0px; position: absolute;"><table class="sapzencrosstab-HScrollTable" id="CROSSTAB_1_hScrollTab"><tbody><tr><td class="sapzencrosstab-HScrollCell"><div class="sapzencrosstab-LowerLeftScrollPad" id="CROSSTAB_1_lowerLeftPad" style="width: 112px; height: 16px;"></div></td><td class="sapzencrosstab-HScrollCell"><div class="sapUiScrollBar" id="__bar0" style="width: 1234px; height: 16px; overflow: hidden;" data-sap-ui="__bar0"><div id="__bar0-sb" style="height: 32px; margin-top: -16px; -ms-overflow-x: scroll; -ms-overflow-y: hidden;"><div id="__bar0-sbcnt" style="width: 1241px; height: 16px;"></div></div></div></td></tr></tbody></table></div><div class="sapzencrosstab-RenderSizeDiv" id="CROSSTAB_1_renderSizeDiv" style="width: 1346px; height: 186px; border-right-width: 0px; border-bottom-width: 0px;"><table class="sapzencrosstab-Crosstab" id="CROSSTAB_1_table"><tbody><tr id="CROSSTAB_1_upperSection"><td id="CROSSTAB_1_upperLeft" style="padding: 0px;"><div id="CROSSTAB_1_upperLeft_scrollDiv" style="overflow: hidden;"><table id="CROSSTAB_1_dimHeaderArea_container" style="border-width: 0px; margin: 0px; padding: 0px; border-collapse: collapse; border-spacing: 0px;"><tbody><tr><td style="border-width: 0px; margin: 0px; padding: 0px; border-spacing: 0px;"><table class="sapzencrosstab-DimensionHeaderArea" id="CROSSTAB_1_dimHeaderArea"><tbody><tr class="sapzencrosstab-HeaderRow" style="height: 24px;"><td tabindex="-1" class="sapzencrosstab-HeaderCellDefault sapzencrosstab-TextAlignmentIE sapzencrosstab-HeaderCellFirstInRow sapzencrosstab-TextAlignmentIE...
CSS
<div id="CROSSTAB_1" data-sap-ui="CROSSTAB_1" class="sapzencrosstab-FontSize-MainMode zenControl " style="overflow:hidden;width:500px;height:300px"><div id="CROSSTAB_1_altRenderModeTableDiv" class="sapzencrosstab-TableDiv sapzencrosstab-TableDivBackground" style="visibility: visible; width: 100%; height: 295px;"><div id="CROSSTAB_1_hScrollDiv" style="position:absolute;bottom:0px;height:16px;width:498px;height:16px"><table id="CROSSTAB_1_hScrollTab" class="sapzencrosstab-HScrollTable"><tbody><tr><td class="sapzencrosstab-HScrollCell"><div id="CROSSTAB_1_lowerLeftPad" class="sapzencrosstab-LowerLeftScrollPad" style="width:153px;height:16px"></div></td><td class="sapzencrosstab-HScrollCell"><div id="__bar0" data-sap-ui="__bar0" style="overflow:hidden;height:16px;width:345px" class="sapUiScrollBar"><div id="__bar0-sb" style="height:32px;margin-top:-16px;overflow-x:scroll;overflow-y:hidden"><div id="__bar0-sbcnt" style="height: 16px; width: 545px;"></div></div></div></td></tr></tbody></table></div><div id="CROSSTAB_1_renderSizeDiv" class="sapzencrosstab-RenderSizeDiv" style="width: 498px; height: 278px; border-bottom-width: 0px; border-right-width: 0px;"><table id="CROSSTAB_1_table" class="sapzencrosstab-Crosstab"><tbody><tr id="CROSSTAB_1_upperSection"><td id="CROSSTAB_1_upperLeft" style="padding:0px"><div id="CROSSTAB_1_upperLeft_scrollDiv" style="overflow:hidden"><table id="CROSSTAB_1_dimHeaderArea_container" style="border-collapse:collapse;border-spacing:0px;padding:0px;border-width:0px;margin:0px"><tbody><tr><td style="border-spacing:0px;padding:0px;border-width:0px;margin:0px"><table id="CROSSTAB_1_dimHeaderArea" class="sapzencrosstab-DimensionHeaderArea"><tbody><tr class="sapzencrosstab-HeaderRow" style="height: 24px;"><td id="__cell0" data-sap-ui="__cell0" class="sapzencrosstab-HeaderCellDefault sapzencrosstab-HeaderCellFirstInRow sapzencrosstab-HeaderCellFirstInCol " tabindex="-1"><div class="sapzencrosstab-cellLayoutDiv" id="__cell0_cellLayoutDiv"...