The table is scrollable, but it’s out of container. I want the table to be scrollable horizontally but not out of the container
Table
What I want
Table
* {
padding: 0;
margin: 0;
}
main {
padding: 25px;
background-color: yellow;
}
table {
border-collapse: collapse;
white-space: nowrap;
}
th {
padding: 10px;
border: 1.5px solid rgba(0,0,0,0.275);
background-color: rgba(0,0,0,0.107);
}
td {
padding: 10px;
border: 1.5px solid rgba(0,0,0,0.275);
}
<body>
<main>
<h1>Table</h1>
<table><thead><tr><th align="left">Table Heading 1</th><th align="left">Table Heading 2</th><th align="center">Center align</th><th align="right">Right align</th><th align="left">Table Heading 5</th></tr></thead><tbody><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr><tr><td align="left">Item 1</td><td align="left">Item 2</td><td align="center">Item 3</td><td align="right">Item 4</td><td align="left">Item 5</td></tr></tbody></table>
</main>
</body>
New contributor
gust is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.