I have a table but I am not sure how can I make the headers available to scroll-CodePudding

Hi I am creating a table and I would like to add a scrolling option for the headers that works on desktop and mobile. I have created menus before with the scrolling option and I also have created tables but this is the first time I am combining two different "class" and I have checked a tutorial which said I could combine them together with a space but it's not working. Please, any idea how could I get this done?

<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 >
<button  onclick="openTable(event, 'Table Header 1')">Table Header 1</button>
<button  onclick="openTable(event, 'Table Header 2')">Table Header 2</button>
<button  onclick="openTable(event, 'Table Header 3')">Table Header 3</button>
<button  onclick="openTable(event, 'Table Header 4')">Table Header 4</button>
<button  onclick="openTable(event, 'Table Header 5')">Table Header 5</button>
<button  onclick="openTable(event, 'Table Header 6')">Table Header 6</button>
</div>

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

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

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

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

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

<div id="Table Header 6" >
<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>

CodePudding user response：

I rewrote a couple of things that were making me noise:

id 's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID.

MDN Reference:

I just added the display: flex style to div.scrollmenu and works really fine.

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";
}

div.tab {
  overflow: hidden;
}

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

div.tabcontent {
  display: none;
}

div.scrollmenu {
  overflow: auto; /* you can change auto to overlay*/
  white-space: nowrap;
  display: flex;
}

    <div >
      <button  onclick="openTable(event, 'table-header-1')">Table Header 1</button>
      <button  onclick="openTable(event, 'table-header-2')">Table Header 2</button>
      <button  onclick="openTable(event, 'table-header-3')">Table Header 3</button>
      <button  onclick="openTable(event, 'table-header-4')">Table Header 4</button>
      <button  onclick="openTable(event, 'table-header-5')">Table Header 5</button>
      <button  onclick="openTable(event, 'table-header-6')">Table Header 6</button>
    </div>

    <div id="table-header-1" >
      <h3>Table Header 1</h3>
      <p>This is the Table Header for the Table number 1.</p>
    </div>

    <div id="table-header-2" >
      <h3>Table Header 2</h3>
      <p>This is the Table Header for the Table number 2.</p>
    </div>

    <div id="table-header-3" >
      <h3>Table Header 3</h3>
      <p>This is the Table Header for the Table number 3.</p>
    </div>

    <div id="table-header-4" >
      <h3>Table Header 4</h3>
      <p>This is the Table Header for the Table number 4.</p>
    </div>

    <div id="table-header-5" >
      <h3>Table Header 5</h3>
      <p>This is the Table Header for the Table number 5.</p>
    </div>

    <div id="table-header-6" >
      <h3>Table Header 6</h3>
      <p>This is the Table Header for the Table number 6.</p>
    </div>