我有一个 table，但我不确定如何才能使 headers 可以滚动

Question

您好，我正在创建一个 table，我想为 headers 添加一个适用于桌面和移动设备的滚动选项。我之前使用滚动选项创建了菜单，我也创建了 tables，但这是我第一次组合两个不同的“class”，我查看了一个教程，其中说我可以组合它们连同 space 但它不起作用。拜托，我该怎么做？

<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>

Answer 1

我重写了一些让我吵闹的东西：

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:

我刚刚将 display: flex 样式添加到 div.scrollmenu 并且效果很好。

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 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>

我有一个 table，但我不确定如何才能使 headers 可以滚动

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

html

css

tabs

scroll

class