<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-align_right" scope="col" style="width:3.25rem">
<span id="column-group-header" class="slds-assistive-text">Choose a row</span>
<div class="slds-th__action slds-th__action_form">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-289" value="checkbox-289" tabindex="0" aria-labelledby="check-select-all-label column-group-header" />
<label class="slds-checkbox__label" for="checkbox-289" id="check-select-all-label">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select All</span>
</label>
</div>
</div>
</th>
<th aria-label="Service Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Service Location">Service Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Service Location column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-526" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Location">Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Account Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-527" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="ICC Subscriber ID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="ICC Subscriber ID">ICC Subscriber ID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="ICC Subscriber ID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-528" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Legacy ID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Legacy ID">Legacy ID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Legacy ID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-529" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Acquired Company or Biller" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Acquired Company or Biller">Acquired Company or Biller</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Acquired Company or Biller column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-530" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="BillingID" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="BillingID">BillingID</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="BillingID column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-531" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Billable" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Billable">Billable</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Billable column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-532" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Parent Service Location" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Parent Service Location">Parent Service Location</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Parent Service Location column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-533" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th class="" scope="col" style="width:3.25rem">
<div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
</th>
</tr>
</thead>
<tbody>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-01" value="checkbox-01" tabindex="0" aria-labelledby="check-button-label-01 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-01" id="check-button-label-01">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 1</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="437 Jarvis Street">
<a href="javascript:void(0);" tabindex="0">437 Jarvis Street</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="25665">25665</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="2571 Lundigan DR">
<a href="javascript:void(0);" tabindex="0">2571 Lundigan Dr</a>
</div>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-02" value="checkbox-02" tabindex="0" aria-labelledby="check-button-label-02 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-02" id="check-button-label-02">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 2</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="5160 Orbitor Dr">
<a href="javascript:void(0);" tabindex="0">5160 Orbitor Dr</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="256234">256234</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="5160 orbitor Dr Mississuaga">
<a href="javascript:void(0);" tabindex="0">5160 orbitor Dr Mississuaga</a>
</div>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-03" value="checkbox-03" tabindex="0" aria-labelledby="check-button-label-03 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-03" id="check-button-label-03">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 3</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="121 University ave east">
<a href="javascript:void(0);" tabindex="0">121 University ave east</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="salesforce.com">salesforce.com</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title=""></div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="563234">563234</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
<td role="gridcell">
<div class="slds-truncate" title="121 University Ave East">
<a href="javascript:void(0);" tabindex="0">121 University Ave East</a>
</div>
</td>
</tr>
</tbody>
</table>

This is my code of the table. Basically i want to hide and show the table when i click on the button.