Question

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

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

我已经看到了很多有关以像素为单位指定的Horizontal属性大小的问题，但看不到％的任何内容。任何帮助将不胜感激。

我想创建如图所示的内容。 enter image description here 我已经使用Pixels来创建它。但是我需要给出％。

我粘贴的上一个问题：链接： 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>

我已使用Pixels来创建它。但是我需要给％。 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

    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 2

您应该尝试使用最小宽度而不是单独使用宽度。

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

Answer 3

使用CSS单元private void exportDatabase() { // Create an instance of Gson. Gson gson = new Gson(); // You can easily convert Objects into Json. MyItem item = new MyItem(); String json = gson.toJson(item); // Fetch your items from your database. ArrayList<MyItems> items = database.getAll(); // Arrays are a bit harder to convert, but not very. json = gson.toJson(items, new TypeToken<ArrayList<MyItems>>(){}.getType()); // Now export it to some easily copy-pasted location. System.out.println(json); }，请参阅文档：https://www.w3schools.com/cssref/css_units.asp

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

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

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

25vw

为了只在桌子上水平滚动，您可以将其包裹起来，然后应用溢出... HTML：

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

CSS：

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

.table-wrapper {
  overflow: auto;
}

.table-wrapper {
  overflow: auto;
}
table {
            border-collapse: collapse;
        }

table td {
            min-width: 25vw;
            border: 1px solid black;
        }

HTML表格-当表格宽度为100％时如何滚动TD宽度？

3 个答案: