Refreshing value with apex:repeat in visualforcepage

Question

I have table with apex:repeat inside a tbody. On a particular user action, I need to refresh the table content. To achieve this I tried by wrapping apex:repeat inside an apex:outputpanel and re-rendering apex:outputpanel when user do the action. With this values are getting refreshed but I am facing issue with styling.

I am using lightning design system for my visualforce page.

If I use layout for outputpanel either as inline or block it is affecting table content style and re-rendering is not happening if I use layout=none.

Can somebody suggest a way to fix the style issue when using outputpanel?

Below is my code-snippet

<apex:form >
    <apex:actionFunction name="setfld"  reRender="refreshslds"/>
 <apex:form >

<table id="table1" class="slds-table  slds-table--cell-buffer slds-no-row-hover" role="listbox">
<thead>
    <tr>
        <th scope="col">
            <div class="slds-truncate slds-form-element__label" title="Field Label">FIELD LABEL</div>
        </th>
        <th scope="col">
            <div class="slds-truncate slds-form-element__label" title="Field Name">FIELD NAME</div>
        </th>
        <th scope="col">
            <div class="slds-truncate slds-form-element__label" title="Data Type">DATA TYPE</div>
        </th>
    </tr>
</thead>
<tbody>
    <apex:variable var="cnt" value="{!0}" />
    <apex:repeat value="{!Oppfld}" var="itr">
        <tr>
            <th scope="row">
                <span class="slds-radio">
                    <input type="radio" id="radio-{!cnt}" name="options" value="on" />
                    <label class="slds-radio__label" for="radio-{!cnt}">
                        <span class="slds-radio_faux"></span>
                        <span class="slds-form-element__label">{!itr.fieldLabel}</span>
                    </label>
                </span>
            </th>
            <td>
                <div class="slds-truncate slds-form-element__label" >{!itr.fieldName}</div>
            </td>
            <td>
                <div class="slds-truncate slds-form-element__label" >{!itr.fieldType}</div>
            </td>
        </tr>
        <apex:variable var="cnt" value="{!cnt+1}"/>
    </apex:repeat>
</tbody>

Answer 1

I fixed it by wrapping table content by <apex:ouputpanel> instead of wrapping <apex:repeat>