html表格单元格匹配tr宽度（非静态行数）[关闭]答案

【问题标题】：html table cell match tr width (non static rows count) [closed]html表格单元格匹配tr宽度（非静态行数）[关闭]
【发布时间】：2014-03-16 10:58:21
【问题描述】：

我有这样的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...

更新：不！跨度

【问题讨论】：

描述不足：第三行的宽度应该是多少？一般来说，如果可用宽度应在单元格之间平均分配，请在问题中指定。（那么答案一般是“你不能，你必须使用表格以外的结构。”）
@JukkaK.Korpela 为什么？我收到了 James Donnelly 的一个很好的回答
如果未来的访问者不知道问题是什么，他们将不会从答案中受益。您的“等等”表明宽度相等，但您接受了一个不这样做的答案。

标签： javascript jquery html css

【解决方案1】：

使用 HTML

只需使用colspan HTML attribute：

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

这意味着，如果您的表格共有 3 列，并且您希望一个单元格跨越所有 3 列，则应指定 colspan 为“3”：

<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 元素，但大多数浏览器会为您添加它。

【讨论】：

@Shaik 先回答。
不不，没有 colspan
@brabertaser1992 为什么你不想使用colspan？这正是colspan 实现的目标。
@AdrianEnriquez 这不是一场比赛......
我喜欢你在面对不断变化的需求和其他人无用的 cmets 时的奉献精神：)

【解决方案2】：

使用colspan="0"

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

【讨论】：

【解决方案3】：

如果您想将 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

【讨论】：