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

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