Epub file does not show the scroll bar?, how large tables are displayed with scroll bars
Great you, appear!
I want to be an epub ebook, completed in sigil software. Finally see the application in the phone.
There are many long and wide tables, They have too many columns and rows, which can not be displayed directly in the phone nor adaptive screen, because it is too small to see clearly.
So I thought of using a scroll bar, added in css
overflow-y: auto;
overflow-x: auto;
In the sigil software, everything is normal, with the caliber on the pc to see everything is normal. When I copy on my mobile phone, the form has no scroll bar and is a scaled-down form that I can not see clearly.
I checked a lot of information, have not been solved for more than two years.
Please help me look, I am in a hurry, I need a scroll bar, Very anxious, very much need your help~
Thank you very much~~
I most want to use the e-book reader: http://www.duokan.com/product
Of course, there are other free and very good
Below is my CSS and html:
---------------------------------------------------------------------------------------------------
.table-responsive
{
width: 100%;
height:100%;
overflow:scroll
overflow-y: auto;
overflow-x: auto;
_overflow: auto;
margin: 0 0 1em;
text-align:left;
word-wrap:break-word;
-webkit-overflow-scrolling: touch;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th
{
vertical-align:center;
padding: 0.3em 0.7em;
border: 1px solid #999;
font-size:0.6rem;
min-width:160px;
max-width:1200px;
word-break: break-all;
word-wrap:break-word
}
table
{
margin:0 auto;
border-collapse:collapse;
display: block;
}
tbody {
display: block;
height: 100%
overflow: auto;
}
---------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:lang="zh-CN">
<head>
<meta content="File" name="right"/>
<title></title>
<link href="../Styles/Styles.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
</head>
<body>
<p class="p-rs">Promiser sign： Unit seal：</p>
<p class="p-rs"> year month day</p>
<div class="table-responsive">
<table class="table-hover" style="text-align: left;">
<tbody>
<tr>
<td>Serial number</td>
<td>Integrated mining area code</td>
<td>Proposed to consolidate the name</td>
<td>Name of mining rights person</td>
<td>Mining right number</td>
<td>The duration of the mining right</td>
<td>Resource reserves</td>
<td>Inflection point coordinates</td>
<td>……</td>
<td>Remarks</td>
</tr>
<tr>
<td>1</td>
<td rowspan="3">Z1</td>
<td>Wangzhuang No. 1 coal mine</td>
<td></td>
<td>××××</td>
<td></td>
<td></td>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Wangzhuang No. 2 coal mine</td>
<td></td>
<td>××××</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Wangzhuang 3 coal mine</td>
<td></td>
<td>××××</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td rowspan="3">Z2</td>
<td>Wangzhuang 4 coal mine</td>
<td></td>
<td>××××</td>
<td></td>
<td></td>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>Wangzhuang coal mine on the 5th</td>
<td></td>
<td>××××</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>Wangzhuang coal exploration area on the 1st</td>
<td></td>
<td>××××</td>
<td></td>
<td></td>
<td></td>
<td>An exploration report has been submitted for inclusion in the consolidation</td>
</tr>
<tr>
<td>7</td>
<td rowspan="3">Z3</td>
<td>Two Longshan exploration area No. 1</td>
<td></td>
<td>××××</td>
<td></td>
<td></td>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>Two Longshan exploration area on the 2nd</td>
<td></td>
<td>××××</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9</td>
<td>Erlongshan exploration area on the 4th</td>
<td></td>
<td>××××</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>…</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
<html>
AdChoices