How to Start New Row of CSS Table Cells Without a Row Wrapper Element

Can I start new row of CSS table cells without a row wrapper element?

Not without flexbox, which hasn’t landed in several major browsers yet, seems to be the consensus.

HTML table push content to new row without using tr element

The HTML specs allows multiple tbodys inside a table. I think you should be using 1 tbody for each row (which can have more than 1 tr).

<table>
  <thead></thead>
  <tbody>
    <tr><!-- 1st row with data columns --></tr>
    <tr><!-- 2nd row which is hidden and with the data that gets shown after expanding --></tr>
  </tbody>
  <tbody><!-- similar to the first tbody --></tbody>
  <tfoot></tfoot>
</table>

Also, the Tablesorter plugin is not implemented correctly. Try using it's fork instead - https://github.com/renatoalbano/jquery-tablesorter/

Ref : https://developer.mozilla.org/en/HTML/Element/table

Wrap table row to the next line

Change the cells to inline blocks:

#table_id {
  display: block;
}

#table_id td {
  display: inline-block;
}

td {
  background: green
}

<table id="table_id">
  <tr>
    <td>testtesttesttest</td>
    <td>testtesttesttest</td>
  </tr>
</table>

CSS/Javascript to force html table row on a single line

Use the CSS property white-space: nowrap and overflow: hidden on your td.

Update

Just saw your comment, not sure what I was thinking, I've done this so many times I forgot how I do it. This is approach that works well in most browsers for me... rather than trying to constrain the td, I use a div inside the td that will handle the overflow instance. This has a nice side effect of being able to add your padding, margins, background colors, etc. to your div rather than trying to style the td.

<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>
    <div class="hideextra" style="width:200px">
        this is the text in column one which wraps</div></td>
   <td>
    <div class="hideextra" style="width:100px">
        this is the column two test</div></td>
</tr>
</table>
</body>
</html>

As a bonus, IE will place an ellipsis in the case of an overflow using the browser-specific text-overflow:ellipsis style. There is a way to do the same in FireFox automatically too, but I have not tested it myself.

Update 2

I started using this truncation code by Justin Maxwell for several months now which works properly in FireFox too.

How can I force a table cell onto a new row

You may try to reset the display properties of table elements and use the flex model:

table,tbody {  display:inline-block;/* whatever, just  reset table layout display to go further */}td {  border:solid 1px;}tr {  display:flex;  flex-wrap:wrap; /* allow to wrap on multiple rows */}td {  display:block;  flex:1 /* to evenly distributs flex elements */}.date, .profile {  width:100%; /* fill entire width,row */  flex:auto; /* reset the flex properti to allow width take over */}

<table>  <tr>    <td class="date">13/05/2015 13:40:55</td>    <td class="firstname">Bob</td>    <td class="lastname">Reed</td>    <td class="errors"></td>    <td class="profile">This is a lot of content that could potentially screw up the table layout if it were to be sat on the same row as the other 4 columns</td>  </tr></table>

Display: table-cell on new row

The simple answer is: you can't, at least not with lists. Adjacent elements with their display set to table-cell are treated as belonging to the same row (even if a row element is not provided, an anonymous one will be created for you). Since lists aren't allowed to contain any other tags between the ul and the li, this simply isn't possible with lists. You'll have to use either different markup or different styling.

Here are your options if you don't want to modify the markup.

Inline-block on the list items: http://jsfiddle.net/XNq74/1/

li {
    display: inline-block; /* could use floats here instead */
    width: 40%;
}

CSS columns would be a reasonable choice: http://jsfiddle.net/XNq74/

ul {
    columns: 2;
}

http://caniuse.com/#feat=multicolumn

Flexbox would also work and can be used in combination with inline-block: http://jsfiddle.net/XNq74/2/

ul {
    display: flex;
    flex-flow: row wrap;
}

li {
    flex: 1 1 40%;
}

http://caniuse.com/#search=flexbox

How do I create an HTML table with a fixed/frozen left column and a scrollable body?

If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...

Relevant HTML & CSS:

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td,
th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
  letter-spacing: 1em;
}

<div>
  <table>
    <tr>
      <th class="headcol">1</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">2</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">3</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">4</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">5</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">6</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
  </table>
</div>

Drop last cell in a table to a new row with flex-basis active

Display the table rows as multiline flex containers. Use flex to make the cells distribute the space equally, but force a 100% width to the special cell.

table {  width: 100%;}tr {  display: flex;  flex-wrap: wrap;}td {  flex: 1;  border: 1px solid grey;}.special {  flex-basis: 100%;  box-sizing: border-box;}

<table>  <thead>    <tr>      <th>header</th>    </tr>  </thead>  <tbody>    <tr>      <td>data</td>      <td>data</td>      <td>data</td>      <td>data</td>      <td class="special">special data</td>    </tr>    <tr>      <td>data</td>      <td>data</td>      <td>data</td>      <td>data</td>      <td class="special">special data</td>    </tr>  </tbody></table>