Html table<td> - 当表格宽度为 100% 时如何滚动 TD 宽度？

Question

我使用<td> 创建了一个包含 5 列的表。我已将表格宽度设置为 100%。当我将表格的<td> 宽度设置为 100% 及以上时，水平滚动条不起作用。

我已经提出了一个相关的问题。因为我没有得到这个问题的任何答案。我再次在这里提出。希望有人可以帮我解决这个问题。

我看到很多关于以像素为单位给出的 Horizo​​ntal 属性大小的问题，但在 % 上看不到任何内容。 非常感谢任何帮助。

我想创建如图所示的东西。 enter image description here 我已经使用像素来创建它。但我需要给出 %。

我粘贴的上一个问题： 关联： Html table - td width in percentage with overflow not working

HTML：

table {
            width: 100%;
            border-collapse: collapse;
        }

        td {
            border: 1px solid black;
        }

<table>
    <tr>
        <td style="width: 25%">Column 1</td>
        <td style="width: 25%">Column 2</td>
        <td style="width: 25%">Column 3</td>
        <td style="width: 25%">Column 4</td>
        <td style="width: 25%">Column 5</td>
    </tr>
</table>

我使用像素来创建它。但我需要给出百分比。 HTML 表格像素和百分比：

  table {
            width: 100%;
            border-collapse: collapse;
        }

        td {
            border: 1px solid black;
        }

 <div class="tableDiv" style="width: 100%; overflow-x: auto; ">
        <table >
            <tr>
                <td style="min-width:250px;">Column 1</td>
                <td style="min-width:250px;">Column 2</td>
                <td style="min-width:250px;">Column 3</td>
                <td style="min-width:250px;">Column 4</td>
                <td style="min-width:250px;">Column 5</td>
            </tr>
        </table>
    </div>
 <br/>
    <div style="width: 100%; overflow-x: auto;">
        <table>
            <tr>
                <td style="min-width:25%;">Column 1</td>
                <td style="min-width:25%;">Column 2</td>
                <td style="min-width:25%;">Column 3</td>
                <td style="min-width:25%;">Column 4</td>
                <td style="min-width:25%;">Column 5</td>
            </tr>
        </table>
    </div>

Answer 1

使用 CSS 单元 vw，请参阅文档：https://www.w3schools.com/cssref/css_units.asp

vw = 相对于视口宽度的 1%^

^ Viewport = 浏览器窗口大小。如果视口宽 50 厘米，则 1vw = 0.5 厘米。

然后将您的td 设为最小宽度25vw

 table td {
     min-width: 25vw;
     ...
 }

为了让表格上的水平滚动只有你可以包装它，然后应用溢出... html:

<div class="table-wrapper">
  <table>
  [...]
  </table>
</div>

CSS：

.table-wrapper {
  overflow: auto;
}

.table-wrapper {
  overflow: auto;
}
table {
            border-collapse: collapse;
        }

table td {
            min-width: 25vw;
            border: 1px solid black;
        }

<div class="table-wrapper">
  <table>
      <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
          <td>Column 4</td>
          <td>Column 5</td>
      </tr>
  </table>
</div>

Answer 2

    table {
        width: 100%;
        border-collapse: collapse;
    }

    td {
        border: 1px solid black;
    }

<div style="width: 100vw; overflow:scroll;">
   <table style="width: 130vw;">
      <tr>
          <td style="width: 50vw">50=50</td>
          <td style="width: 50vw">50 + 50 =100</td>
          <td style="width: 30vw">50 + 50 +30 =130(this td 30% need to horizontal scrollbar)</td>
      </tr>
   </table>
</div>

这个回答你之前的问题。试试这个。

Answer 3

您应该尝试使用 min-width 而不是单独使用 width。

<table>
    <tr>
        <td style="min-width: 25%">Column 1</td>
        <td style="min-width: 25%">Column 2</td>
        <td style="min-width: 25%">Column 3</td>
        <td style="min-width: 25%">Column 4</td>
        <td style="min-width: 25%">Column 5</td>
    </tr>
</table>

或者如果你想获得滚动条，你可以增加表格宽度

table {
        width: 125%;
        border-collapse: collapse;
    }

    td {
        border: 1px solid black;
    }

<table>
    <tr>
        <td style="min-width: 25%">Column 1</td>
        <td style="min-width: 25%">Column 2</td>
        <td style="min-width: 25%">Column 3</td>
        <td style="min-width: 25%">Column 4</td>
        <td style="min-width: 25%">Column 5</td>
    </tr>
</table>