Граница с вкладками не будет отображаться

Question

Это, вероятно, простой, но я не могу понять это. Я размещаю содержимое с вкладками в области контента с двумя колонками 70:30. Поскольку содержимое с вкладками находится в области 70%, я не могу получить правильную границу для рендеринга, как показано здесь, на моей тестовой странице: http://www.realtimehockey.net/testing1.html Я играл с отступом и полями как слева, так и справа и все еще не могу получить его правильно. Любой вход будет приветствоваться.

Ниже приведен CSS, который я использую. С таблицей Excel, встроенной в контент, HTML значительно превышает предел в 30 000 символов.

CSS

<style> 
    td, 
    tr { 
     border-style: none 
    } 
    A { 
     text-decoration: none 
    } 
    a:link { 
     color: #0000ff; 
    } 
    a:visited { 
     color: #0000ff: 
    } 
    a:hover { 
     color: #ff6600; 
    } 
</style> 


<style> 
    .tabs input[type=radio] { 
     display: none; 
     text-decoration: none; 
    } 
    .tabs { 
     width: 100%; 
     height: 1100px; 
     float: none; 
     list-style: none; 
     position: relative; 
     padding: 0px; 
     margin-right: 5px; 
     margin: 5px; 
     margin-top: 2px; 
    } 
    .tabs li { 
     float: left; 
    } 
    .tabs label { 
     display: block; 
     padding: 10px 20px; 
     color: #FFFFFF; 
     font-family: patua one; 
     font-style: italic; 
     font-size: 14px; 
     background: linear-gradient(#151515, #080808); 
     cursor: pointer; 
     position: relative; 
    } 
    .tabs label:hover { 
     background: #ff6600; 
    } 
    .tab-content { 
     z-index: 2; 
     display: none; 
     left: 0; 
     font-size: 20px; 
     line-height: 140%; 
     padding: 5px; 
     margin-right: 5px; 
     position: absolute; 
     box-sizing: border-box; 
     border: 3px solid #454545; 
     border-top: 7px solid #454545; 
     background-color: #ffffff; 
    } 
    [id^=tab]:checked + label { 
     background: #ff6600; 
     color: white; 
     top: 0; 
    } 
    [id^=tab]:checked ~ [id^=tab-content] { 
     display: block; 
    } 
</style> 

<style id="OrgsAtoD56_5439_Styles"> 
    <!--table { 
     mso-displayed-decimal-separator: "\."; 
     mso-displayed-thousand-separator: "\,"; 
    } 
    .xl155439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: black; 
     font-size: 11.0pt; 
     font-weight: 400; 
     font-style: normal; 
     text-decoration: none; 
     font-family: Calibri, sans-serif; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     mso-background-source: auto; 
     mso-pattern: auto; 
     white-space: nowrap; 
    } 
    .xl655439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: white; 
     line-height: 2px; 
     font-size: 11.0pt; 
     font-weight: 700; 
     font-style: italic; 
     text-decoration: none; 
     font-family: "Patua One", monospace; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     background: white; 
     mso-pattern: black none; 
     white-space: nowrap; 
    } 
    .xl665439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: white; 
     line-height: 2px; 
     font-size: 11.0pt; 
     font-weight: 700; 
     font-style: italic; 
     text-decoration: none; 
     font-family: "Patua One", monospace; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     background: black; 
     mso-pattern: black none; 
     white-space: nowrap; 
    } 
    .xl675439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: red; 
     font-size: 10.0pt; 
     font-weight: 700; 
     font-style: normal; 
     text-decoration: none; 
     font-family: Calibri, sans-serif; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     background: white; 
     mso-pattern: black none; 
     white-space: nowrap; 
    } 
    .xl685439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: red; 
     font-size: 10.0pt; 
     font-weight: 700; 
     font-style: italic; 
     text-decoration: none; 
     font-family: "Patua One", monospace; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     background: white; 
     mso-pattern: black none; 
     white-space: nowrap; 
    } 
    .xl695439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: black; 
     font-size: 11.0pt; 
     font-weight: 700; 
     font-style: normal; 
     text-decoration: none; 
     font-family: Calibri, sans-serif; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     mso-background-source: auto; 
     mso-pattern: auto; 
     white-space: nowrap; 
    } 
    .xl705439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: #0563C1; 
     font-size: 11.0pt; 
     font-weight: 700; 
     font-style: normal; 
     text-decoration: none; 
     font-family: Calibri, sans-serif; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     mso-background-source: auto; 
     mso-pattern: auto; 
     white-space: nowrap; 
    } 
    .xl715439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: windowtext; 
     font-size: 11.0pt; 
     font-weight: 700; 
     font-style: normal; 
     text-decoration: none; 
     font-family: Calibri, sans-serif; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     mso-background-source: auto; 
     mso-pattern: auto; 
     white-space: nowrap; 
    } 
    .xl725439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: black; 
     font-size: 12.0pt; 
     font-weight: 700; 
     font-style: normal; 
     text-decoration: none; 
     font-family: Candara, sans-serif; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     mso-background-source: auto; 
     mso-pattern: auto; 
     white-space: nowrap; 
    } 
    .xl735439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: windowtext; 
     font-size: 11.0pt; 
     font-weight: 700; 
     font-style: normal; 
     text-decoration: none; 
     font-family: Calibri, sans-serif; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     mso-background-source: auto; 
     mso-pattern: auto; 
     white-space: nowrap; 
    } 
    .xl745439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: white; 
     font-size: 11.0pt; 
     font-weight: 700; 
     font-style: normal; 
     text-decoration: none; 
     font-family: Calibri, sans-serif; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     mso-background-source: auto; 
     mso-pattern: auto; 
     white-space: nowrap; 
    } 
    .xl755439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: white; 
     font-size: 11.0pt; 
     font-weight: 700; 
     font-style: normal; 
     text-decoration: none; 
     font-family: Calibri, sans-serif; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     mso-background-source: auto; 
     mso-pattern: auto; 
     white-space: nowrap; 
    } 
    .xl765439 { 
     padding-top: 1px; 
     padding-right: 1px; 
     padding-left: 1px; 
     mso-ignore: padding; 
     color: white; 
     line-height: 14px; 
     font-size: 11.0pt; 
     font-weight: 400; 
     font-style: italic; 
     text-decoration: none; 
     font-family: "Patua One", monospace; 
     mso-font-charset: 0; 
     mso-number-format: General; 
     text-align: general; 
     vertical-align: bottom; 
     background: #FF6600; 
     mso-pattern: black none; 
     white-space: nowrap; 
    } 
    --> 
</style> 
<style> 
    #table-wrapper { 
     position: relative; 
    } 
    #table-scroll { 
     height: 965px; 
     width: auto; 
     overflow: auto; 
     margin-top: 10px; 
    } 
    #table-wrapper table { 
     width: auto; 
    } 
    #table-wrapper table * {} #table-wrapper table thead th .text { 
     position: absolute; 
     top: -20px; 
     z-index: 2; 
     height: 20px; 
     width: auto; 
    } 
</style> 

Answer 1

Ну реализовать это в вас CSS и HTML, вы получите его

.zpwrapper { padding: 0;} 

, а также изменить

.zpcolumns { 
    margin: 0 -7px; 
} 

в

.zpcolumns { 
    margin: 0; 
} 

изменить это

<div class="zpflLeft zpcolumn" style="width:70%"> 

в эту

<div class="zpflLeft zpcolumn" style="width:71%"> 

Примечание Если вы не хотите увеличить процентную ширину от 70% до 71%, то просьба заменить соответствующий CSS с этим

.tab-content { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    background-color: #ffffff; 
    border-color: #454545; 
    border-image: none; 
    border-right: 3px solid #454545; 
    border-style: solid; 
    border-width: 7px 3px 3px; 
    box-sizing: border-box; 
    display: none; 
    font-size: 20px; 
    left: 0; 
    line-height: 140%; 
    margin-right: 0px; 
    padding: 0px; 
    position: absolute; 
    z-index: 2; 
} 




#table-scroll { 
    height: 965px; 
    margin-top: 0px; 
    overflow: auto; 
    width: auto; 
}