[SalesForce] how to display data table records vertically in visual force page

Thanks for your time.
i want to display data table records vertically in visual force page,here is my below code. how to achieve this

 <div id="CountrySelection" >
                    <apex:variable var="count" value="{!1}"   />
                     <legend>Country Selection for National Filing Records Creation</legend>
                    <table cellspacing="0" cellpadding="0" class="slds-table slds-table--bordered slds-no-row-hover">

                        <tr>
                            <apex:repeat value="{!lstAllCountries}" var="f"> 
                                <td class="slds-text-heading--label" style="vertical-align: middle;"> <input type="checkbox" id="chk_national_{!count}" value="{!f.Id}" title= "{!f.Name}" style="margin-right: 3px;vertical-align: middle;"/>{!f.Country_code__c}</td>
                                <apex:outputText rendered="{!AND((MOD(count, 8) == 0), (count < lstAllCountries.size))}" value="</tr><tr>" escape="false"/>
                                <apex:variable var="count" value="{!count+1}"/>
                            </apex:repeat>                                        
                        </tr>                                
                    </table>
                </div>

This is displaying like this,
enter image description here

i want this to be in vertical orderwise, is it possible?

Best Answer

Change the code to this.

<div id="CountrySelection" >
                    <apex:variable var="count" value="{!1}"   />
                    <legend>Country Selection for National Filing Records Creation</legend>
                    <table cellspacing="0" cellpadding="0" class="slds-table slds-table--bordered slds-no-row-hover">
                    <apex:repeat value="{!lstAllCountries}" var="f"> 
                        <tr>
                        <td class="slds-text-heading--label" style="vertical-align: middle;"> <input type="checkbox" id="chk_national_{!count}" value="{!f.Id}" title= "{!f.Name}" style="margin-right: 3px;vertical-align: middle;"/>{!f.Country_code__c}</td>
                                <apex:outputText rendered="{!AND((MOD(count, 8) == 0), (count < lstAllCountries.size))}" value="</tr><tr>" escape="false"/>
                                <apex:variable var="count" value="{!count+1}"/>                                         
                        </tr> 
                    </apex:repeat>                                
                    </table>
                    </div>

You need to apply the apex:repeat tag before creating a new row (tr tag). See if this helps

Related Topic