Question

我正在尝试在Google网站中插入带有HTML Box的可折叠表格。可折叠表的代码来自http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table。代码是

<html>
<head>
<style>
    .container {
        background-color:deepskyblue;
        width: 600px;
        height:50px;
        position: relative;
    }
    .title {
        font-size: 16pt;
        font-weight: bold;
        color: aliceblue;
        position: absolute;
        left: 20px;
        top:25%;
    }
    #opened {
        display: none;
    }
    .arrow-up {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid white;
    }
    .arrow-down {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid white;
    }
    .arrow-up, .arrow-down {
        position: absolute;
        top: 40%;
        right:15px;
    }
    .hidden-content {
        margin:0 0 20px 0;
        padding: 10px 20px 10px 20px;
        border: 1px solid deepskyblue;
        border-top: none;
        background-color: aliceblue;
    }
</style>
<script>
    var collapse;
    var uncollapse;
    var turnOn = true;

     // Chrome Sites Fix
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

    function tempChromefix() {
        // To turn off set true to false
        if (turnOn == false && is_chrome) {
            document.getElementById("opened").style.display = "block";
            document.getElementById("closed").style.display = "none";
        } else {
            return false;
        }
    }

    function uncollapse() {
        document.getElementById("closed").style.display = "block";
        document.getElementById("opened").style.display = "none";
    }

    function collapse() {
        document.getElementById("opened").style.display = "block";
        document.getElementById("closed").style.display = "none";
    }
</script>
</head>

<body onLoad="tempChromefix()">

<table id="closed">
    <tr>
        <td>
            <div class="container" onclick="collapse()">
                <div class="title">Click to open drop-down</div>
                <div class="arrow-down"></div>
            </div>
        </td>
    </tr>
</table>

<table id="opened">
    <tr>
        <td>
            <div class="container" onclick="uncollapse();">
                <div class="title">Click to close drop-down</div>
                <div class="arrow-up"></div>
            </div>
            <div class="hidden-content">
                <h3>It works!</h3>
                <p>This content is to be hidden from the user until clicked.   </p>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

我面临的问题是桌子的宽度。我希望它具有最大可能的宽度，具体取决于屏幕尺寸。例如，我希望将表格扩展到我的MacBook和iMac中的屏幕尺寸。

逻辑方法是使用width: 100%，以便表继承其父级的屏幕大小。但是，似乎在HTML Box中，不同的类别不会继承父级的属性。

例如，在.container部分中，如果我使用width: 100%，则会折叠为零宽度而不是屏幕的完整尺寸。

非常感谢任何帮助！

--- Madhur

Answer 1

我也有这个问题，并最终想出（非常不直观）的方法是将鼠标悬停在HTML框上，然后点击“对齐中心”图标。保存时，元素将是整个宽度（我的div至少是）。

Google网站中HTML Box的大小

1 个答案: