我有一张桌子，但我不确定如何让标题可以滚动

嗨，我正在创建一个表格，我想为适用于桌面和移动设备的标题添加一个滚动选项。我之前使用滚动选项创建了菜单，并且还创建了表格，但这是我第一次组合两个不同的“类”，并且我检查了一个教程，该教程说我可以将它们与空格组合在一起，但它不起作用。拜托，知道我该怎么做吗？

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

div.tab {
overflow: hidden;
}

div.tab button {
float: left;
padding: 14px 16px;
font-size: 20px;
}

div.tabcontent {
display: none;
}

div.scrollmenu {
overflow: auto;
white-space: nowrap;
}

</style>

<div class="tab scrollmenu">
<button class="tablinks" onclick="openTable(event, 'Table Header 1')">Table Header 1</button>
<button class="tablinks" onclick="openTable(event, 'Table Header 2')">Table Header 2</button>
<button class="tablinks" onclick="openTable(event, 'Table Header 3')">Table Header 3</button>
<button class="tablinks" onclick="openTable(event, 'Table Header 4')">Table Header 4</button>
<button class="tablinks" onclick="openTable(event, 'Table Header 5')">Table Header 5</button>
<button class="tablinks" onclick="openTable(event, 'Table Header 6')">Table Header 6</button>
</div>

<div id="Table Header 1" class="tabcontent">
<h3>Table Header 1</h3>
<p>This is the Table Header for the Table number 1.</p>
</div>

<div id="Table Header 2" class="tabcontent">
<h3>Table Header 2</h3>
<p>This is the Table Header for the Table number 2.</p> 
</div>

<div id="Table Header 3" class="tabcontent">
<h3>Table Header 3</h3>
<p>This is the Table Header for the Table number 3.</p>
</div>

<div id="Table Header 4" class="tabcontent">
<h3>Table Header 4</h3>
<p>This is the Table Header for the Table number 4.</p>
</div>

<div id="Table Header 5" class="tabcontent">
<h3>Table Header 5</h3>
<p>This is the Table Header for the Table number 5.</p>
</div>

<div id="Table Header 6" class="tabcontent">
<h3>Table Header 6</h3>
<p>This is the Table Header for the Table number 6.</p>
</div>

<script>
function openTable(evt, TableName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(TableName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>