Wrap Table Row to The Next Line

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>

How to force table cell td content to wrap?

Use table-layout:fixed in the table and word-wrap:break-word in the td.

See this example:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

       <table>          <tr>             <td>1</td>             <td>Lorem Ipsum</td>             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>          </tr>          <tr>             <td>2</td>             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>          </tr>          <tr>             <td>3</td>             <td></td>             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>          </tr>       </table>

Wrap long HTML tables to next line

What you need to decide is what behavior happens with the next row as it flows down to the next. Is it adding a new orphaned row, ie:

#container {
    width: 95%;
    max-width: 646px;
    margin: 10px auto;
    border: 5px solid black;
    padding: 5px;
}
#container .row {
    border: 1px solid green;
    border-left: 0;
    border-top: none;
    margin: 0;
    padding: 0;
}
#container br {
    clear: both;
}
#container .block {
    border: 1px solid blue;
    border-bottom: 0;
    border-right: 0;
    float: left;
    width: 128px;
}

<div class="row">
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
     <br/>
</div>

http://jsfiddle.net/userdude/KFFgf/

You'll see the overflow becomes a new row with the leftover and blank space on the right.

If you just want a "rolling" block, you can:

http://jsfiddle.net/userdude/KFFgf/1/

Where the rows just block down in flow. You could put <br/> tags in there to create hard row breaks if necessary. Not sure if that helps and haven't tested across browsers, but that's what I think you have in mind.

Wrap the table cell content at newline character

If you got the string from a database, there are two ways to accomplish this:

To replace \n's with html breaks:

echo str_replace("\n", "<br>", $string);

To see \n's as they are:

echo '<pre>' . $string . '</pre>';

There are also a css solution, apply this rule to the container:

white-space:pre;

Expanding TD causes content to wrap to next line

To prevent "V" link to jump to next row, simply add white-space: nowrap to td.

white-space defines what to do, when browser meets some whitespace (space, tab, etc). If we set it to nowrap, browser will not wrap our content if there will be not enought space.

When the table expand beyond boundaries, the "V" is collapsing to next row, because of no space.

in your css add:

td {
  white-space: nowrap;
}

JSFiddle: https://jsfiddle.net/66c93hgv/

Wrap Table Row to The Next Line