HTMLで破棄可能なテーブル行

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

、それは適切なdisplay CSS属性の値を使用することにより可能です。

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

...ソース：このデモページを参照してください、ギャラクシーネクサス電話でテスト

http://dabblet.com/gist/1576044

は動作し、ほとんどのWebkitのベースのモバイルブラウザのために働く必要があります。また、Firefox MobileとOperaでも動作するはずですが、私はテストしませんでした。

かいつまんで、ページの幅を検出し、max-widthブレークポイントを設定し、適用するメディアクエリを使用します。

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

Answer 2

いいえ表の行は複数の行に分割できません。それは、単一のセルの代わりに2行のセルが必要なことを意味します。

Answer 3

私のプロジェクトでは、このようなものが必要でした。私は古いブラウザをサポートする必要があったので、HTML5を使用せず、処理できる行の総幅/総数を確認するためのjavascriptが必要でした：

http://pastebin.com/raw.php?i=umFWx3mK（HTMLファイル内にコピーしてブラウザで開くだけです） CSS2.1のよう

$(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") 
}