Question

我有这样的html结构：

<table border=1 >
    <tr> <!--this tr has one <td> that needs to be 100% width-->
        <td></td>
    </tr>
    <tr> <!--this tr has two <td> that each need to be 50% width-->
        <td></td>
        <td></td>
    </tr>
    <tr> <!--this tr has three <td> that each need to be 33.3333% width-->
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr> <!--this tr has one <td> that needs to be 100% width-->
        <td></td>
    </tr>
</table>

我该怎么办，例如第一个tr td是100％，第二个tr两个td都是50％，但是它们都是100％等等，我需要填充td到tr宽度，如果有的话不止一个td，要做到这一点，他们划分这个宽度......

http://jsfiddle.net/ujMgM/

可能没有使用js ......

更新：不！列跨度

Answer 1

使用HTML

只需使用colspan HTML attribute：

此属性指定当前单元格跨越的列数。此属性的默认值为1（“1”）。

这意味着，如果您的表格总共有3列，并且您希望一个单元格跨越所有3列，则您需要指定{3}的colspan：

<table border=1 >
    <tr>
        <td colspan="3">
        </td>
    </tr>
    <tr>
        <td colspan="2">
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td colspan="3">
        </td>
    </tr>
</table>

使用jQuery

您可以使用jQuery为您添加colspan属性：

// Get a reference to the table's tbody element, and define the number of columns
var $tbody = $('table').find('tbody'),
    columns = 3;

// Loop through each tr within the table's tbody
$tbody.find('tr').each(function() {

    // Determine the number of cells, and set the colspan
    var children = $(this).children().size(),
        colspan = columns / children;

    // If the colspan variable is set to *.5, give the first cell higher colspan
    if (colspan % 1 === 0.5) {
        $(this).children('td').attr('colspan', colspan - 0.5);
       $(this).children('td:first').attr('colspan', colspan + 0.5);
    }
    // Otherwise give all cells equal colspan
    else
        $(this).children('td').attr('colspan', colspan);
});

JSFiddle demo

请注意我在这里使用tbody的方式？理想情况下，您的表格应该有tbody元素，但大多数浏览器会为您添加此元素。

Answer 2

如果要为所有三列拟合td，则必须使用colspan =“3”。

关于colspan：

此属性包含一个非负整数值，指示单元格扩展的列数。其默认值为1;如果其值设置为0，则它将延伸到该单元所属的结束，即使是隐式定义的。高于1000的值将被视为不正确，并将设置为默认值

colspan Reference mdn

修改后的代码类似于

<table border=1 >
    <tr>
        <td colspan="3">
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td colspan="2">
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td colspan="3">
        </td>
    </tr>
</table>

Fiddle Demo

Answer 3

使用colspan="0"

或者使用jQuery计算行中的大多数td并动态添加colspan。

html表格单元格匹配tr宽度（非静态行数）

3 个答案:

使用HTML

使用jQuery