Question

有没有办法让表格行在特定单元格中可分解？

<table>
<tr>
<td>Some title descriptive text</td>
<td>nnumbers</td><td>Short text</td><td>datetime</td>
<tr>
... more rows
</table>

现在，如果视口的宽度太小（通常在手机上使用时），我希望此行在第一个单元格之后断开。

无论如何使用html5 css3并最终使用一些Javascript可以实现吗？

Answer 1

没有。表行不能分成多行。这意味着你想要两行单元而不是一行。

Answer 2

对于我的一个项目，我需要这样的东西;我需要支持旧的浏览器，所以它不使用HTML5，只需javascript来检查能够处理的行的总宽度/数量：

http://pastebin.com/raw.php?i=umFWx3mK （只需将其复制到HTML文件中并使用浏览器打开）

$(window).resize(distribute)
$(document).ready(function(){

    allboxes = $(".box");
    $('#container').delegate(".box","mouseenter",function(){
        $(this).addClass('current') 
    }).delegate(".box","mouseleave",function(){
        $(this).removeClass('current')  
    });
    table = $("#table");
    distribute();

})

var lastfit, allboxes, table

function distribute(){
    var fitAmount = Math.floor($("#container").width()/180);


    if(lastfit!=fitAmount){
        if(fitAmount<1){fitAmount=1}
        lastfit = fitAmount;
        var clones = allboxes.clone(),
            emptycells = "", emptyrows = "", 
            trs = table.find("tr");

        for(var i=0;i<fitAmount;i++){
            emptycells += "<td>&nbsp;</td>";
        }   

        trs.html(emptycells)

        var count = trs.length*fitAmount

        if(count < allboxes.length){
            var newRows = Math.ceil((allboxes.length - count)/fitAmount);
            for(var j=0;j<newRows;j++){
                emptyrows += "<tr>"+emptycells+"</tr>";
            }
        }       

        table.append(emptyrows)
        var tds = table.find("td"), trs = table.find("tr");

        clones.each(function(index){
            tds.eq(index).html("").append($(this))
        })
        allboxes = $(".box");

        trs.filter(function(){ return !/box/gi.test(this.innerHTML) }).remove()


    }
}

function boxmouseover(box){
    $(box).css("background","red")
}

function boxmouseout(box){
    $(box).css("background","#CCC")
}

Answer 3

从CSS2.1开始，可以使用适当的display CSS属性值。请参阅此演示页：

http://dabblet.com/result/gist/1576044

......和来源：

http://dabblet.com/gist/1576044

在Galaxy Nexus手机上进行测试，适用于大多数基于Webkit的移动浏览器。此外，它应该适用于Firefox Mobile和Opera，但我没有测试。

长话短说，使用媒体查询检测页面宽度并设置max-width断点并应用：

css table, tbody, thead, tr, td, th { display: block }

HTML中的可分表表行

3 个答案: