javascript - 如何通过可滚动内联并排放置多个表格

我需要内联显示不同高度(行)的表格，具有滚动功能(向左滚动，因为它是 RTL)。

大概有 20 到 30 张 table 。感谢您的帮助!

下面是带有较少表格的 html:

<html>
    <head></head>
    <body>
        <div style='overflow: scroll;display: block;'>  
          <table id="point" style="float: right">
            <thead>
              <tr>
                <td class="textFont" style="font weight:bold;height: 20px">
                  <label class="sp">point</label>
                  <label class="pm"> </label><br>
                </td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="textFont" style="height: 30px;">
                  <label>point</label>
                  <label>point</label>
                  <label></label>
                </td>
             </tr>                                          
            </tbody>
            </table>
    </body>

最佳答案

不强制使用 display:inline-table 和 float:right

并且您需要在容器 div 上使用 white-space:nowrap。

演示

.point
{
   display:inline-table;
   border:1px solid #000;
}

<div style='overflow: scroll;display: block;white-space:nowrap;'>
  <table class="point">
    <thead>
      <tr>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="point">
    <thead>
      <tr>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="point">
    <thead>
      <tr>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="point">
    <thead>
      <tr>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>point</label>
          <label>point</label>
        </td>
        <td>
          <label>point</label>
          <label>point</label>
        </td>
        <td>
          <label>point</label>
          <label>point</label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

关于javascript - 如何通过可滚动内联并排放置多个表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48049805/

javascript - 如何通过可滚动内联并排放置多个表格

上一篇：javascript - 在 Javascript 中单击按钮时增加数组索引

下一篇：angularjs - 二进制文件损坏 - 如何使用 AngularJS 下载二进制文件