如何使x溢出呈现在表而不是窗口上？

Question

下面的链接中有一个表格： https://www.storm-online.ir/invoice/4YEzvKWkfm8ESqiHFNZfmh

我给它一个最小宽度的CSS和溢出X。但是在移动模板中，overflow-x不在表上呈现。

我需要以正确的顺序在页眉和页脚中看到模板，并且可以将表左右移动。

代码很简单：

<div>
<table style="">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
</table>
</div>

css是这样的：

<style>
table{
overflow-x: scroll; min-width: 600px;
}
table td{
border: solid 1px #ccc;
}
</style>

Answer 1

尝试将overflow-x: scroll;添加到表的父div

 .table-wrapper {
   overflow-x: scroll;
 }
 table {
   min-width: 600px;
}
td {
    border: solid 1px #ccc;
}

<div class="table-wrapper">
    <table style="">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
        </tr>
    </table>
</div>