如何将CSS合并到表中

Question

我想将CSS代码放入我的表中，但不希望在表的每一行都设置样式。我有以下代码：

CSS：

.statetable th
{
    width: 250px;
    color: red;
    text-align: left;
}
.statetable tr
{
    width: 250px;
}

的JavaScript：

function showState()
{       
    myTable = "<table class='statetable'><br><th><td>Type</td>";
    myTable += "<td>Value</td></th>";

    createRow("------------------", "------------");
    createRow("Layout", (document.getElementById("startradio").form.format == "Default"));
    myTable +="</table>";
    document.getElementById("tableHolder").innerHTML = myTable;
}

function createRow(type, value)
{
    myTable += "<table class='statetable'><tr><td>" + type + "</td>";
    myTable += "<td>" + value + "</td></tr>";
}

HTML：

 <input type="button" id="button" value="Click to show states" onclick="showState()"/>
 <div id="tableHolder"></div>

风格不起作用。我放置了我的th和tr并将css放在他们身上，但我不确定我做错了什么。

Answer 1

替换这些：

myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";

有了这些：

myTable = "<table class='statetable'><tr><th>Type</th>";
myTable += "<th>Value</th></tr>";

此外，在createRow中，替换：

myTable += "<table class='statetable'><tr><td>" + type + "</td>";
myTable += "<td>" + value + "</td></tr>";

使用：

myTable += "<tr><td>" + type + "</td><td>" + value + "</td></tr>";

Answer 2

您最终会获得更多起始<table>标记然后关闭标记。 createRow()方法不应返回起始<table>标记。

此外，桌面上的.set宽度代替<tr> / <th>。