如何在 colspan td 中与 td 的宽度相同答案

【问题标题】：How can I same width as th for td in colspan td如何在 colspan td 中与 td 的宽度相同
【发布时间】：2017-01-30 21:41:15
【问题描述】：

我在下面有 html 表格布局：

<table>
    <thead>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">
                <tr>
                    <td rowspan="3">Name</td>
                    <td>foo</td>
                    <td>bar</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </td>
        </tr>
    </tbody>
</table>

我想要这个带有 jquery 函数的布局，代码在这里： jquery

function createTable() {
	var mytable = $('<table></table>').appendTo('body');
	
	var thead = $('<thead></thead>').appendTo(mytable);
			
	var row = $('<tr></tr>').appendTo(thead);
	
	for (var j = 0; j < 3; j++) {
		$('<th></th>').text(j).appendTo(row);
	}
}

function addName() {

		var CategoryRow = $('<tr></tr>').appendTo('table');
		
		var col = $('<td></td>').attr({'colspan':3}).appendTo(CategoryRow);
		
		var row = $('<tr></tr>').appendTo(col);
		
		for (var j = 0; j < 3; j++) {
			$('<td></td>').text('a'+j).appendTo(row);
		}
		
		$(row).find('td:eq(0)').text('name');
}

createTable();
addName();

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

现在问题是当我使用 jquery 附加此布局时，colspan 表格单元格中的表格单元格宽度与表格标题不同

注意如果我保存动态生成表并运行，那么布局是好的。

【问题讨论】：

使用 th colspan...
1 始终使用 valid html（嵌套表）（尽管有您的评论） 2 使用 colspan。 3 在嵌套表中使用<colgroup> 将所有列宽设置为相同
谢谢@freedomn-m 你能提供一个html表格布局吗？

标签： javascript jquery html css layout

【解决方案1】：

我已经通过替换 td > tbody 解决了这个问题。

使用这个 html 代码，我已经实现了我所需要的。

<table>
<thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
</thead>
<tbody>
    <tr>
        <td colspan="3">
            <tbody>
                <td rowspan="3">Name</td>
                <td>foo</td>
                <td>bar</td>
            </tbody>
            <tbody>
                <td>1</td>
                <td>2</td>
            </tbody>
            <tbody>
                <td>1</td>
                <td>2</td>
            </tbody>
        </td>
    </tr>
</tbody>
</table>

【讨论】：