我不明白为什么打开此文件时总是显示水平滚动条:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="WEEK-S-140.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME</title>
</head>
<body>
<div class="containerPage">
<div class="tableHEADINGOuter">
<table class="tableHEADING">
<colgroup>
<col width="50%" /><col width="50%" />
</colgroup>
<tr>
<td class="textCongregation">Congregation Name</td>
<td class="textTitle">Midweek meeting Schedule</td>
</tr>
</table>
</div>
<div class="containerMeeting">
<a name="week0" />
<table class="tableDATE">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellBibleReading" colspan="3">April 11-17 | Job 21-27</td>
</tr>
<tr>
<td class="textSpecialEvent" colspan="3">Circuit Assembly - Imitate
Jehovah! [09/04/2016] </td>
</tr>
<tr>
<td class="textSpecialEventLocation" colspan="3">Bristol Assembly
Hall, Hortham Lane, Bristol, BS32 4JH</td>
</tr>
</table>
</div>
<div class="containerMeeting">
<a name="week1" />
<table class="tableDATE">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellBibleReading" colspan="2">
<div class="floatRight">
Chairman:<br />
Auxiliary Classroom Counselor 1: </div>
April 11-17 | Job 21-27</td>
<td class="cellName">Chairman<br />
Counselor 1<br />
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="cellTime">19:20</td>
<td>
<div class="floatRight">
Prayer: </div>
<span class="bulletTFGW">•</span> <span class="textSongLabel">Song</span>
<span class="textSongNumber">83</span> </td>
<td class="cellName">Brother 0</td>
</tr>
<tr>
<td class="cellTime">19:23</td>
<td class="textTheme"><span class="bulletTFGW">•</span>
<span class="textTheme">Opening Comments</span>
<span class="textDuration">(3 min.) </span></td>
<td class="cellName">Chairman</td>
</tr>
</table>
</div>
<div class="containerMeeting">
<a name="week2" />
<table class="tableDATE">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellBibleReading" colspan="2">
<div class="floatRight">
Chairman:<br />
Auxiliary Classroom Counselor 1:<br />
Auxiliary Classroom Counselor 2: </div>
April 11-17 | Job 21-27</td>
<td class="cellName">Chairman<br />
Counselor 1<br />
Counselor 2</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="cellTime">19:20</td>
<td>
<div class="floatRight">
Prayer: </div>
<span class="bulletTFGW">•</span> <span class="textSongLabel">Song</span>
<span class="textSongNumber">83</span> </td>
<td class="cellName">Brother 0</td>
</tr>
<tr>
<td class="cellTime">19:23</td>
<td class="textTheme"><span class="bulletTFGW">•</span>
<span class="textTheme">Opening Comments</span>
<span class="textDuration">(3 min.) </span></td>
<td class="cellName">Chairman</td>
</tr>
</table>
</div>
<div class="containerMeeting">
<br style="page-break-before: always;" />
<div class="tableHEADINGOuter">
<table class="tableHEADING">
<colgroup>
<col width="50%" /><col width="50%" />
</colgroup>
<tr>
<td class="textCongregation">Congregation Name</td>
<td class="textTitle">Midweek meeting Schedule</td>
</tr>
</table>
</div>
<a name="week3" />
<table class="tableDATE">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellBibleReading" colspan="2">
<div class="floatRight">
Chairman: </div>
April 11-17 | Job 21-27</td>
<td class="cellName">Chairman<br />
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="cellTime">19:20</td>
<td>
<div class="floatRight">
Prayer: </div>
<span class="bulletTFGW">•</span> <span class="textSongLabel">Song</span>
<span class="textSongNumber">83</span> </td>
<td class="cellName">Brother 0</td>
</tr>
<tr>
<td class="cellTime">19:23</td>
<td class="textTheme"><span class="bulletTFGW">•</span>
<span class="textTheme">Opening Comments</span>
<span class="textDuration">(3 min.) </span></td>
<td class="cellName">Chairman</td>
</tr>
</table>
<table class="tableTFGW">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellTFGW" colspan="2">
<div class="textTFGW">
TREASURES FROM GOD'S WORD</div>
</td>
<td class="cellClass">Main Hall</td>
</tr>
<tr>
<td class="cellTime">19:33</td>
<td colspan="1"><span class="bulletTFGW">•</span>
<span class="textTheme">Theme 1</span>
<span class="textDuration">(10 min.) </span></td>
<td class="cellName">Brother 1</td>
</tr>
<tr>
<td class="cellTime">19:41</td>
<td colspan="1"><span class="bulletTFGW">•</span>
<span class="textTheme">Digging for Spiritual Gems</span>
<span class="textDuration">(8 min.) </span></td>
<td class="cellName">Brother 2</td>
</tr>
<tr>
<td class="cellTime">19:46</td>
<td>
<div class="floatRight">
Student: </div>
<span class="bulletTFGW">•</span> <span class="textTheme">Bible
Reading</span> <span class="textDuration">(4 min. or less)
</span></td>
<td class="cellName">ReaderM</td>
</tr>
</table>
<table class="tableTFGW">
<colgroup>
<col class="columnTime" /><col class="columnTheme2Class" />
<col class="columnName" /><col class="columnName" />
</colgroup>
<tr>
<td class="cellTFGW" colspan="2">
<div class="textTFGW">
TREASURES FROM GOD'S WORD</div>
</td>
<td class="cellClass">Auxiliary Classroom 1</td>
<td class="cellClass">Main Hall</td>
</tr>
<tr>
<td class="cellTime">19:33</td>
<td colspan="2"><span class="bulletTFGW">•</span>
<span class="textTheme">Theme 1</span>
<span class="textDuration">(10 min.) </span></td>
<td class="cellName">Brother 1</td>
</tr>
<tr>
<td class="cellTime">19:41</td>
<td colspan="2"><span class="bulletTFGW">•</span>
<span class="textTheme">Digging for Spiritual Gems</span>
<span class="textDuration">(8 min.) </span></td>
<td class="cellName">Brother 2</td>
</tr>
<tr>
<td class="cellTime">19:46</td>
<td>
<div class="floatRight">
Student: </div>
<span class="bulletTFGW">•</span> <span class="textTheme">Bible
Reading</span> <span class="textDuration">(4 min. or less)
</span></td>
<td class="cellName">Reader1</td>
<td class="cellName">ReaderM</td>
</tr>
</table>
<table class="tableTFGW">
<colgroup>
<col class="columnTime" /><col class="columnTheme3Class" />
<col class="columnName" /><col class="columnName" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellTFGW" colspan="2">
<div class="textTFGW">
TREASURES FROM GOD'S WORD</div>
</td>
<td class="cellClass">Auxiliary Classroom 1</td>
<td class="cellClass">Auxiliary Classroom 2</td>
<td class="cellClass">Main Hall</td>
</tr>
<tr>
<td class="cellTime">19:33</td>
<td colspan="3"><span class="bulletTFGW">•</span>
<span class="textTheme">Theme 1</span>
<span class="textDuration">(10 min.) </span></td>
<td class="cellName">Brother 1</td>
</tr>
<tr>
<td class="cellTime">19:41</td>
<td colspan="3"><span class="bulletTFGW">•</span>
<span class="textTheme">Digging for Spiritual Gems</span>
<span class="textDuration">(8 min.) </span></td>
<td class="cellName">Brother 2</td>
</tr>
<tr>
<td class="cellTime">19:46</td>
<td>
<div class="floatRight">
Student: </div>
<span class="bulletTFGW">•</span> <span class="textTheme">Bible
Reading</span> <span class="textDuration">(4 min. or less)
</span></td>
<td class="cellName">Reader1</td>
<td class="cellName">Reader2</td>
<td class="cellName">ReaderM</td>
</tr>
</table>
<table class="tableAYFM">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellAYFM" colspan="2">
<div class="textAYFM">
APPLY YOURSELF TO THE FIELD MINISTRY</div>
</td>
<td class="cellClass">Main Hall</td>
</tr>
<tr>
<td class="cellTime">20:02</td>
<td><span class="bulletAYFM">•</span> <span class="textTheme">Prepare
This Month’s Presentations</span> <span class="textDuration">(15
min.) </span></td>
<td class="cellName">Brother 3</td>
</tr>
</table>
<table class="tableAYFM">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellAYFM" colspan="2">
<div class="textAYFM">
APPLY YOURSELF TO THE FIELD MINISTRY</div>
</td>
<td class="cellClass">Main Hall</td>
</tr>
<tr>
<td class="cellTime">19:49</td>
<td>
<div class="floatRight">
Student:<br />
Assistant: </div>
<span class="bulletAYFM">•</span> <span class="textTheme">Initial
Call</span> <span class="textDuration">(2 min. or less) </span>
</td>
<td class="cellName">Name1M<br />
Name1MA</td>
</tr>
<tr>
<td class="cellTime">19:54</td>
<td>
<div class="floatRight">
Student:<br />
Assistant: </div>
<span class="bulletAYFM">•</span> <span class="textTheme">Return
Visit</span> <span class="textDuration">(4 min. or less) </span>
</td>
<td class="cellName">Name2M<br />
Name2MA</td>
</tr>
<tr>
<td class="cellTime">20:01</td>
<td>
<div class="floatRight">
Student:<br />
Assistant: </div>
<span class="bulletAYFM">•</span> <span class="textTheme">Bible
Study</span> <span class="textDuration">(6 min. or less) </span>
</td>
<td class="cellName">Name3M<br />
Name3MA</td>
</tr>
</table>
</div>
<div class="containerMeeting">
<table class="tableDATE">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
</table>
<table class="tableAYFM">
<colgroup>
<col class="columnTime" /><col class="columnTheme2Class" />
<col class="columnName" /><col class="columnName" />
</colgroup>
<tr>
<td class="cellAYFM" colspan="2">
<div class="textAYFM">
APPLY YOURSELF TO THE FIELD MINISTRY</div>
</td>
<td class="cellClass">Auxiliary Classroom 1</td>
<td class="cellClass">Main Hall</td>
</tr>
<tr>
<td class="cellTime">19:49</td>
<td>
<div class="floatRight">
Student:<br />
Assistant: </div>
<span class="bulletAYFM">•</span> <span class="textTheme">Initial
Call</span> <span class="textDuration">(2 min. or less) </span>
</td>
<td class="cellName">Name11<br />
Name11A</td>
<td class="cellName">Name1M<br />
Name1MA</td>
</tr>
<tr>
<td class="cellTime">19:54</td>
<td>
<div class="floatRight">
Student:<br />
Assistant: </div>
<span class="bulletAYFM">•</span> <span class="textTheme">Return
Visit</span> <span class="textDuration">(4 min. or less) </span>
</td>
<td class="cellName">Name21<br />
Name21A</td>
<td class="cellName">Name2M<br />
Name2MA</td>
</tr>
<tr>
<td class="cellTime">20:01</td>
<td>
<div class="floatRight">
Student:<br />
Assistant: </div>
<span class="bulletAYFM">•</span> <span class="textTheme">Bible
Study</span> <span class="textDuration">(6 min. or less) </span>
</td>
<td class="cellName">Name31<br />
Name31A</td>
<td class="cellName">Name3M<br />
Name3MA</td>
</tr>
</table>
</div>
<div class="containerMeeting">
<table class="tableDATE">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
</table>
<table class="tableAYFM">
<colgroup>
<col class="columnTime" /><col class="columnTheme3Class" />
<col class="columnName" /><col class="columnName" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellAYFM" colspan="2">
<div class="textAYFM">
APPLY YOURSELF TO THE FIELD MINISTRY</div>
</td>
<td class="cellClass">Auxiliary Classroom 1</td>
<td class="cellClass">Auxiliary Classroom 2</td>
<td class="cellClass">Main Hall</td>
</tr>
<tr>
<td class="cellTime">19:49</td>
<td>
<div class="floatRight">
Student:<br />
Assistant: </div>
<span class="bulletAYFM">•</span> <span class="textTheme">Initial
Call</span> <span class="textDuration">(2 min. or less) </span>
</td>
<td class="cellName">Name11<br />
Name11A</td>
<td class="cellName">Name12<br />
Name12A</td>
<td class="cellName">Name1M<br />
Name1MA</td>
</tr>
<tr>
<td class="cellTime">19:54</td>
<td>
<div class="floatRight">
Student:<br />
Assistant: </div>
<span class="bulletAYFM">•</span> <span class="textTheme">Return
Visit</span> <span class="textDuration">(4 min. or less) </span>
</td>
<td class="cellName">Name21<br />
Name21A</td>
<td class="cellName">Name22<br />
Name22A</td>
<td class="cellName">Name2M<br />
Name2MA</td>
</tr>
<tr>
<td class="cellTime">20:01</td>
<td>
<div class="floatRight">
Student:<br />
Assistant: </div>
<span class="bulletAYFM">•</span> <span class="textTheme">Bible
Study</span> <span class="textDuration">(6 min. or less) </span>
</td>
<td class="cellName">Name31<br />
Name31A</td>
<td class="cellName">Name32<br />
Name32A</td>
<td class="cellName">Name3M<br />
Name3MA</td>
</tr>
</table>
<table class="tableLAC">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellLAC" colspan="3">
<div class="textLAC">
LIVING AS CHRISTIANS</div>
</td>
</tr>
<tr>
<td class="cellTime">20:07</td>
<td colspan="2"><span class="bulletLAC">•</span>
<span class="textSongLabel">Song</span>
<span class="textSongNumber">42</span> </td>
</tr>
<tr>
<td class="cellTime">20:17</td>
<td><span class="bulletLAC">•</span> <span class="textTheme">Theme
1</span> <span class="textDuration">(10 min.) </span></td>
<td class="cellName">Brother 4</td>
</tr>
<tr>
<td class="cellTime">20:22</td>
<td><span class="bulletLAC">•</span> <span class="textTheme">Theme
2</span> <span class="textDuration">(5 min.) </span></td>
<td class="cellName">Brother 5</td>
</tr>
<tr>
<td class="cellTime">20:52</td>
<td>
<div class="floatRight">
Conductor:<br />
Reader: </div>
<span class="bulletLAC">•</span> <span class="textTheme">Congregation
Bible Study </span><span class="textDuration">(30 min.)</span>
</td>
<td class="cellName">Conductor<br />
Reader</td>
</tr>
<tr>
<td class="cellTime">20:55</td>
<td class="textTheme"><span class="bulletLAC">•</span>
<span class="textTheme">Review/Preview/Announcements</span>
<span class="textDuration">(3 min.) </span></td>
<td class="cellName">Chairman</td>
</tr>
<tr>
<td class="cellTime">21:00</td>
<td>
<div class="floatRight">
Prayer: </div>
<span class="bulletLAC">•</span> <span class="textSongLabel">Song</span>
<span class="textSongNumber">65</span> </td>
<td class="cellName">Brother 8</td>
</tr>
</table>
<table class="tableLAC">
<colgroup>
<col class="columnTime" /><col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellLAC" colspan="3">
<div class="textLAC">
LIVING AS CHRISTIANS</div>
</td>
</tr>
<tr>
<td class="cellTime">20:07</td>
<td colspan="2"><span class="bulletLAC">•</span>
<span class="textSongLabel">Song</span>
<span class="textSongNumber">42</span> </td>
</tr>
<tr>
<td class="cellTime">20:17</td>
<td><span class="bulletLAC">•</span> <span class="textTheme">Theme
1</span> <span class="textDuration">(10 min.) </span></td>
<td class="cellName">Brother 4</td>
</tr>
<tr>
<td class="cellTime">20:22</td>
<td><span class="bulletLAC">•</span> <span class="textTheme">Theme
2</span> <span class="textDuration">(5 min.) </span></td>
<td class="cellName">Brother 5</td>
</tr>
<tr>
<td class="cellTime">20:25</td>
<td class="textTheme"><span class="bulletLAC">•</span>
<span class="textTheme">Review/Preview/Announcements</span>
<span class="textDuration">(3 min.) </span></td>
<td class="cellName">Chairman</td>
</tr>
<tr>
<td class="cellTime">20:55</td>
<td><span class="bulletLAC">•</span> <span class="textTheme">Service
Talk Theme</span> <span class="textDuration">(30 min.) </span>
</td>
<td class="cellName">Circuit Overseer</td>
</tr>
<tr>
<td class="cellTime">21:00</td>
<td>
<div class="floatRight">
Prayer: </div>
<span class="bulletLAC">•</span> <span class="textSongLabel">Song</span>
<span class="textSongNumber">65</span> </td>
<td class="cellName">Brother 8</td>
</tr>
</table>
</div>
</div>
</body>
</html>
这是CSS:
/* Column widths */
.columnTime {
width: 7%;
}
.columnTheme1Class {
width: 76%;
}
.columnTheme2Classes {
width: 64%;
}
.columnTheme3Classes {
width: 52%;
}
.columnName {
width: 17%;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */
font-family: Calibri;
}
table tbody tr:hover td {
color: #000;
background: #efefef;
}
body{
width:100%;
background: #666;
}
.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
.containerMeeting {
}
.cellBibleReading {
padding-left: 3mm;
font-size: 11pt;
font-weight: 700;
text-transform: uppercase;
}
.cellTime {
padding-left: 3mm;
padding-right: 5mm;
font-size: 9pt;
font-weight: 700;
color: gray;
}
.cellName {
font-size: 10pt;
font-weight: normal;
}
.floatRight {
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
float: right;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
.tableHEADINGOuter {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom: 1px gray solid;
padding-bottom: 2px;
margin-bottom: 5mm;
}
.tableHEADING {
}
.tableHEADING td {
vertical-align: bottom;
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom: 4px gray solid;
}
.textSpecialEvent {
text-align: center;
}
.textSpecialEventLocation {
text-align: center;
}
.tableDATE {
margin-bottom: 2mm;
}
.tableTFGW {
margin-bottom: 2mm;
}
.cellTFGW {
padding-left: 1mm;
}
.textTFGW {
padding-left: 1mm;
padding-top: 1mm;
padding-bottom: 1mm;
background-color: #606a70;
width: 90mm;
font-size: 10pt;
font-weight: 700;
}
.bulletTFGW {
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 1mm;
color: #606a70;
font-size: 14pt;
font-weight: normal;
}
.tableAYFM {
margin-bottom: 2mm;
}
.cellAYFM {
padding-left: 1mm;
}
.textAYFM {
padding-left: 1mm;
padding-top: 1mm;
padding-bottom: 1mm;
background-color: #c18626;
width: 90mm;
font-size: 10pt;
font-weight: 700;
}
.bulletAYFM {
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 1mm;
color: #c18626;
font-size: 14pt;
font-weight: normal;
}
.cellClass {
font-size: 8pt;
font-weight: 700;
vertical-align: bottom;
color: gray;
}
.tableLAC {
margin-bottom: 2mm;
}
.cellLAC {
padding-left: 1mm;
}
.textLAC {
padding-left: 1mm;
padding-top: 1mm;
padding-bottom: 1mm;
background-color: #961526;
width: 90mm;
font-size: 10pt;
font-weight: 700;
}
.bulletLAC {
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 1mm;
color: #961526;
font-size: 14pt;
font-weight: normal;
}
.textDuration {
padding-left: 1mm;
font-family: Calibri;
font-size: 9pt;
font-weight: normal;
}
.textTheme {
font-size: 11pt;
font-weight: normal;
}
.textSongLabel {
font-size: 11pt;
font-weight: normal;
}
.textSongNumber {
font-size: 12pt;
font-weight: normal;
}
.textCongregation {
text-align: left;
font-size: 11pt;
font-weight: 700;
text-transform: uppercase;
}
.textTitle {
text-align: right;
font-size: 18pt;
font-weight: 700;
}
@media print {
body{
background: #FFF;
}
.containerPage, .containerMeeting, .tableDATE, .tableHEADINGOuter, .tableHEADING, .tableTFGW, .tableAYFM, .tableLAC, {
width: 99%;
min-width: 99%;
max-width: 99%;
padding-left: 0;
padding-right: 0;
margin-left:0;
margin-right:0;
}
}
如您所见,即使在非常宽的屏幕和完整的最大化视图下,我也会得到水平滚动条。
最佳答案
您的身体元素设置为100%,但边距使其大于100%。
在正文CSS上添加margin:0px应该可以修复它。
body {
width: 100%;
margin: 0px;
background: #666;
}
而且,必须调整打印部分,以便“打印预览”仍然可以:
@media print {
body{
background: #FFF;
}
.containerPage, .containerMeeting, .tableDATE, .tableHEADINGOuter, .tableHEADING, .tableTFGW, .tableAYFM, .tableLAC, {
width: 99%;
min-width: 99%;
max-width: 99%;
padding-left: 0;
padding-right: 0;
margin-left:auto;
margin-right:auto;
}
}
边距需要设置为自动。
关于html - 为什么水平滚动条总是在Internet Explorer中出现在此页面上?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36132804/