我建立了一个简单的网页，其中在单击按钮时使用Javascript创建了表格。
我给了表一个类名，并且给了这个类一些格式化属性，例如：
表格布局：固定
宽度：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中使用
//注释。Here是应用我建议的更改的代码。
还有一件事;您很可能想使用
.forumTable th, .forumTable td而不是.forumTable th, td。此更改将为th内的所有td和.forumTable标记设置样式，而不是页面中的所有td标记以及th内的所有.forumTable标记样式。关于css - 为什么不能使用CSS限制此表的大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22129379/