将空 td 添加到 tds 少于 max 的行

Question

我从 Javascript 对象向 table 动态添加数据。我的代码最终是这样的：

<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

即使 tds 不存在，我也希望每一行都有 table 边框。所以基本上对于代码中的示例，我想要一个带边框的 3x3 table。如果不在每一行中实际制作空 tds，这可能吗？

Answer 1

已编辑

在我看来，你只需添加一点点 CSS 并插入所有 TD（空）：

table {
    border-style: solid;
    border-width: 1px;
    border-collapse: separate;
    empty-cells: show;
}

td {
    border-style: solid;
    border-width: 1px;
}

<table>
  <tr>
    <td>1</td>
    <td></td>  <!-- empty -->
    <td></td>  <!-- empty -->
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td></td>  <!-- empty -->
 </tr>
</table>

Answer 2

您可以：

修改原JS，使其生成colspan属性（<td colspan="3">会宽到3<td>的；当然会失去网格对称性。
如果您的 table 个单元格都具有相同的固定宽度，您可以在 table 上使用背景图像。
您可以结束 a little script 来完成 table，cf:

var table = document.getElementsByTagName('table')[0];
function normalizeTable() {
    var trs = table.getElementsByTagName('tr'), 
        len = trs.length, max = 0, td;
    // first we search for the longest table row in terms of # of children 
    for (var i = len; i--;) {
        if (trs[i].children.length > max) 
            max = trs[i].children.length;
    }
    // now we can fill the other rows
    for (var j = len; j--;) {
        while (trs[j].children.length < max) {
            td = document.createElement('td');
            trs[j].appendChild(td);
        }
    }
}
normalizeTable();

将空 td 添加到 tds 少于 max 的行

Add empty td to rows which have less tds than max

javascript

html-table