Как заставить X-переполнение рендериться на столе вместо окна? - PullRequest
Новая
       6

Как заставить X-переполнение рендериться на столе вместо окна?

0 голосов
/ 26 ноября 2018

В приведенной ниже ссылке есть таблица: https://www.storm -online.ir / invoice / 4YEzvKWkfm8ESqiHFNZfmh

Я дал ей минимальную ширину в css и overflow-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>

1 Ответ

0 голосов
/ 26 ноября 2018

Попробуйте добавить overflow-x: scroll; к родительскому элементу таблицы 

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