为什么不能使用CSS限制此表的大小？

debugcn 发表于 Dev

lcazarre

我建立了一个简单的网页，其中在单击按钮时使用Javascript创建了表格。

我给了表一个类名，并且给了这个类一些格式化属性，例如：table-layout：fixed width：650px

另外，我尝试强制将表的td元素内的文本换行。

尽管如此，该表仍会溢出其父元素，而结果却不是我所期望的。自从我在网站上创建了另一个以类似方式设置且正常运行的页面后，我感到更加困惑。

你能告诉我我做错了吗？

结果在此处输入图片说明

的HTML

<head>
    <meta charset="UTF-8" /> 
    <title>Forum</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <link rel="stylesheet" type="text/css" href="stocktails.css" />
    <script type="text/javascript" src="forum.js"></script>
</head>
<body>

    <nav id="top-menu">
        <ul>
            <li> <a href="index.xhtml">Home</a> </li>
            <li> <a href="charting.xhtml">Charting</a> </li>
            <li> <a href="map.xhtml">Map</a> </li>
            <li> <a href="financials.xhtml">Financials</a> </li>
            <li> <a href="forum.xhtml">Forum</a> </li>
            <li> <a href="about.xhtml">About</a> </li>
        </ul>
    </nav>

    <div id="maindiv">
        <header>
            <hgroup>
                <h1> Discussion forum </h1>
            </hgroup>
            <p> Bounce your investing ideas off the community </p>
        </header>

        <div>
            <p> Key in you post. </p>
            <input type="text" id="postText" />
            <button type="submit" onclick="tableCreate();">Submit your post</button>
        </div>

        <article>
            <div id="tablePlaceholder"></div>
        </article>

        <aside class="about">
            <header>
                <h1> Forum etiquette </h1>
                <p> Thou shall not troll </p>
            </header>
            <section>
                <hgroup>
                    <h1> No promotion </h1>
                </hgroup>
                <p> Do not use this forum to promote your own business. </p>
            </section>
            <section>
                <hgroup>
                    <h1> Keep calm and carry on </h1>
                </hgroup>
                <p> Be courteous. Personal disagreements should be handled through email and not through public posts. </p>
            </section>
            <section>
                <hgroup>
                    <h1> No hijacking </h1>
                </hgroup>
                <p> Do not hijack someone else's thread and interrupt a topic of discussion. </p>
            </section>
        </aside>

        <div class="clear"></div>
    </div>

    <footer>
        <p>
            This is a footer.
        </p>
    </footer>

</body>
</html>

的CSS

body {
    background-color: #fffbef;
}

.story p {
    line-height: 1.2;
    text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
    color: #093844;
    margin: .25ex 12pt;
}

.clear {
    margin: 0;
    padding: 0;
    clear: both;
}

img.img-right {
    display: block;
    float: right;
    border: none;
    padding: 2px;
    margin: 3px 6pt 3px 6px;
}

/* navigation menu */

nav#top-menu {
    width: 100%;
    height: 50px;
    //background-color: #fff2c1;
    margin: 0;
    padding: 0;
}

#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

#top-menu ul li {
    margin: 0;
    padding: 0;
}

#top-menu ul li a {
    display: block;
    float: left;
    max-height: 25px;
    width: 100px;
    margin: 0;
    padding: 5px 0;
    font-family: sans-serif;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    color: #52736b;
    border-bottom: #fffbef solid 2px;
}

#top-menu ul li a:hover { border-bottom: #52736b solid 2px; }

/* header */

header h1 { margin-top: 0; }

header p {
    font-family: sans-serif;
    font-weight: bold;
    font-style: italic;
    font-size: 85%;
    margin: .25ex 12pt;
    color: #093844;
}

/* maindiv */

#maindiv {
    width: 1250px;
    margin: 0 auto;
    padding: 10px;
    background-color: #eec;
}

/* article */

article {
    width: 950px;
    float: left;
}

article h1 {
    font-size: 110%;
    margin-top: 12pt;
    padding-top: 3pt;
    border-top: 4px solid #52736b;
}

/* aside */

aside.about {
    float: right;
    width: 238px;
    background-color: #b7c4b1;
    margin: 3pt 6pt 3pt 6pt;
}

aside h1 { font-size: 110%; }
aside h2 { font-size: 90%; }
aside p {
    margin: 0 12pt;
    font-family: sans-serif;
    font-style: italic;
    font-size: 80%;
}

aside section h1 {
    padding-top: 3pt;
    border-top: 4px solid #4f5856;
}

aside header p {
    font-size: 85%;
}

aside section {
    padding: 5px 0 5px 0;
}

/* footer */

footer {
    background: #4f5856;
    clear: all;
}

footer p {
    color: #8c8e7e;
    font-size: 70%;
    font-family: sans-serif;
    text-align: center;
    margin: 0;
    padding: 10px 0;
}


//----------------------------------------------------------------
//--------------------FORUM---------------------------------------
//----------------------------------------------------------------

.forumTable table {
    float: left;
    padding: 10px;
    table-layout: fixed;
    width: 650px;
}

.forumTable table th, td {
    border: 1px #52736b solid;
    word-wrap: break-word
}

.forumTable table caption {
    padding-top: 10px;
    font-size: 130%;
}

.forumTable tfoot td {
    border: none;
}

.forumTable th {
    text-align: left;
}

Java脚本

function tableCreate(){
    var tablePlaceholder = document.getElementById("tablePlaceholder");
    var tbl  = document.createElement('table');
    var br = document.createElement('br');
    tbl.className = "forumTable"

    for(var i = 0; i < 2; i++){ //rows
        var tr = tbl.insertRow();
        for(var j = 0; j < 2; j++){ //columns
            var td = tr.insertCell();
        }
    }
    //var tf = tbl.createTFoot();
    //var tfr = tf.insertRow();
    //var tfd = tfr.insertCell();

    tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[0].appendChild(document.createTextNode('Date'));
    tbl.getElementsByTagName("tr")[0].getElementsByTagName("td")[1].appendChild(document.createTextNode('Post number'));
    tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[0].appendChild(document.createTextNode('Member'));
    tbl.getElementsByTagName("tr")[1].getElementsByTagName("td")[1].appendChild(document.createTextNode('TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText'));

    tablePlaceholder.appendChild(br);
    tablePlaceholder.appendChild(tbl);

}

幽灵般的

您的CSS有两个问题：

您使用的选择器不会使您的样式应用于表格。

使用.forumTable table将尝试使用该类table 在元素内部设置样式forumTable。然而，你table 是对的forumTable类。您应该使用table.forumTable或.forumTable。

.forumTable { /*was: .forumTable table*/
    float: left;
    padding: 10px;
    table-layout: fixed;
    width: 650px;
}

.forumTable th, td { /*was: .forumTable table th, td*/
    border: 1px #52736b solid;
    word-wrap: break-word; /*you were also missing this semicolon*/
}

.forumTable caption { /*was: .forumTable table caption*/
    padding-top: 10px;
    font-size: 130%;
}

另外，您的注释会导致CSS解析失败；您不能//在CSS中使用注释。

这是应用我建议的更改的代码。

还有一件事; 您最有可能想要使用.forumTable th, .forumTable td而不是.forumTable th, td。这种变化将所有的样式th和td标签内.forumTable，而不是所有td的页面标签，所有th标签内.forumTable。