function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ramesh RageRamesh Rage 

How do I make vertical tables in HTML with dynamic data? I mean the rows will be vertical with table headers on the left.

How do I make vertical tables in HTML? By vertical, I mean the rows will be vertical with table headers on the left.

I have tried something like below, i can display results how i was expecting but when any field value is empty then that particulat  <td> cell is shrinking its height and making entire table big mess. I tried CSS "empty-cells: show" but it is also not working.

    table { border-collapse: separate; empty-cells: show; line-height:25px; }
     tr { display: block; float: left; width:200px;}
    th,  td { display: block; }
    #rich1 .sfdc_richtext img {width:90%; height:250px;}

  <apex:form >

      <table border="1" class="variant-table" >
            <td style=" height:250px; border:0;"></td>
            <td style="background-color: #53B3AE;">Name</td>
            <td style="background-color: #53B3AE;">SKU Number</td>
            <td style="background-color: #53B3AE;">WAN</td>
            <td style="background-color: #53B3AE;">HAN</td>
            <td style="background-color: #53B3AE;">Physical Dimensions</td>
            <td style="background-color: #53B3AE;">Notes</td>
         <apex:repeat value="{!arqivaproducts}" var="p">
            <td id="rich1"><apex:outputField style=" border:none;" value="{!p.Arq_Product_Image__c}"></apex:outputField></td>
            <!-- <td> <apex:image style="align:center;" url="{!p.Arq_Product_Image__c}"  /></td> -->
            <td><apex:outputField value="{!p.Name}"></apex:outputField></td>
            <td><apex:outputField value="{!p.ccrz__SKU__c}"></apex:outputField></td>
            <td><apex:outputText value="{!p.CCArq_WAN__c}"></apex:outputText></td>
            <td><apex:outputText value="{!p.CCArq_HAN__c}"></apex:outputText></td>
            <td><apex:outputField value="{!p.CCArq_Physical_Dimensions__c}"></apex:outputField></td>
            <td><apex:outputField value="{!p.ccrz__LongDesc__c}"></apex:outputField></td>

Please let me know if any one has any better solution than this or any adice how can i fix my issue when values are empty.

Thanks in Advance

The following post might answer your question
Ramesh RageRamesh Rage
Hi @Ramu,

Thanks for the post.

My requiremnet is a bit diffrent, i need to show my data as shown below.All the headers on Left Side and beside to them data has to be shown.
sample table expecting
Please help me if you have any sample code for this requiremnet also.

@Ramesh : Why dont you use Matrix Report to generate your data you want, and use Visualforce to call that report to fullfill this requirement.