选项卡式内容边框不会显示

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;
}