Apex Code Development You need to sign in to do that
Don't have an account?
Ramesh 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.
<style>
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;}
</style>
<apex:form >
<table border="1" class="variant-table" >
<tr>
<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>
</tr>
<apex:repeat value="{!arqivaproducts}" var="p">
<tr>
<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>
</tr>
</apex:repeat>
</table>
</apex:form>
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
Regards,
Ramesh
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.
<style>
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;}
</style>
<apex:form >
<table border="1" class="variant-table" >
<tr>
<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>
</tr>
<apex:repeat value="{!arqivaproducts}" var="p">
<tr>
<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>
</tr>
</apex:repeat>
</table>
</apex:form>
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
Regards,
Ramesh
https://developer.salesforce.com/forums/ForumsMain?id=906F000000097dnIAA
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.
Please help me if you have any sample code for this requiremnet also.
Regards,
Ramesh