Breakable table row in HTML - css

Question

Is there a way to make a table row breakable at a certain cell?
<table>
<tr>
<td>Some title descriptive text</td>
<td>nnumbers</td><td>Short text</td><td>datetime</td>
<tr>
... more rows
</table>
Now I would like this row to break after the first cell if the width of the viewport is too small (typically when used on mobile phones).
Is that achievable anyhow using html5 css3 and eventually some Javascript?

Answer 1

As of CSS2.1, it is possible by using appropriate display CSS attribute values. See this demo page:
http://dabblet.com/result/gist/1576044
...and the source:
http://dabblet.com/gist/1576044
Tested on a Galaxy Nexus phone, works, and should work for most Webkit-based mobile browsers. Also, it should work on Firefox Mobile and Opera, though I didn't test.
Long story short, use a media query to detect page width and set a max-width breakpoint and apply:
css
table, tbody, thead, tr, td, th { display: block }

Answer 2

No. Table rows cannot be broken onto multiple lines. That'd imply you want TWO rows of cells instead of a single.

Answer 3

I needed something just like this for a project of mine; i needed to support old browsers so it doesn't use HTML5, just javascript to check the overall width/amount of rows able to handle:
http://pastebin.com/raw.php?i=umFWx3mK (Just copy it inside an HTML file and open it with a browser)
$(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> </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")
}