function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aditya ZagadeAditya Zagade 

LWC : Horizontal scrollbar for Table

Hi Folks,

I want to make the table scroll horizontally, adding the pseudo-code I tried. 
<template>
	<lightning-card variant="narrow" class="card">
		<lightning-tabset variant="vertical">
			<lightning-tab label="Target Param1">
				<lightning-tabset>
					<lightning-tab label="Yearly">
						<!-- ADDING "slds-scrollable" HERE WORKED, BUT IT MADE "Some content..." SCROLLABLE -->
						<div>
							Some content
							.
							.
							.
						</div>
						<div>
							<table class="slds-table slds-table_bordered">
								<!-- I WANT TO MAKE TABLE HORIZONTALLY SCROLLABLE -->
								<thead>
									<th>slds-table 1</th>
									<th>slds-table 2</th>
									<th>slds-table 3</th>
									<th>slds-table 4</th>
									<th>slds-table 5</th>
								</thead>

								<tbody>
									<td>1</td>
									<td>2</td>
									<td>3</td>
									<td>4</td>
									<td>5</td>
								</tbody>

							</table>
						</div>
					</lightning-tab>
				</lightning-tabset>
			</lightning-tab>
		</lightning-tabset>
	</lightning-card>
</template>

 
Gian Piere VallejosGian Piere Vallejos
You need to reduce the width size of the table to activate the scrollable-x. Try to add class="slds-scrollable_x" style="height: 5rem;width: 24rem;" to the div wrapper of the table: 
<div class="slds-scrollable_x" style="height: 5rem;width: 24rem;">
  <table class="slds-table slds-table_bordered slds-scrollable_x">
    <thead>
      <th>slds-table 1</th>
	  <th>slds-table 2</th>
	  <th>slds-table 3</th>
	  <th>slds-table 4</th>
	  <th>slds-table 5</th>
	</thead>
	<tbody>
	  <td>1</td>
	  <td>2</td>
	  <td>3</td>
	  <td>4</td>
	  <td>5</td>
	</tbody>
  </table>
</div>