How to Split a String (E.G. a Long Url) in a Table Cell Using CSS

How to display a long link in multiple lines via CSS?

There is a CSS Property called "word-break" which you may find useful:

div {
    background: red;
    width: 200px;
    height: 200px;
    word-break: break-all;
}

Reference: W3Schools word-break information

force line break in html table cell

I think what you're trying to do is wrap loooooooooooooong words or URLs so they don't push the size of the table out. (I've just been trying to do the same thing!)

You can do this easily with a DIV by giving it the style word-wrap: break-word (and you may need to set its width, too).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

However, for tables, you must either wrap the content in a DIV (or other block tag) or apply: table-layout: fixed. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). Read more here.

Sample code:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

Hope that helps somebody.

html - table row like a link

You have two ways to do this:

Using javascript:
<tr onclick="document.location = 'links.html';">
Using anchors:
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

I made the second work using:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

To get rid of the dead space between columns:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Here is a simple demo of the second example: DEMO

Dynamically Split a table cell into multiple columns depending on the comma

Here is the snippet

let td = document.getElementById("container");
let string = "T-Block, S-Block, Finance-Block";
let newArray = string.split(",");

newArray.forEach(item => {
  let span = document.createElement("span");
  span.setAttribute("class", "btn btn-info me-1");
  span.innerHTML = item;
  td.appendChild(span);
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Surname</th>
      <th scope="col">Location Visited</th>
      <th scope="col">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td id="container"></td>
      <td>June, 24, 2012</td>
    </tr>
  </tbody>
</table>

PHP or HTML/CSS solution for forcing line breaks in table

You can use CSS:

table {
    table-layout: fixed;
    width: 100%;
}

table td, table th {
    word-wrap: break-word;       /* Internet Explorer 5.5+, Chrome, Firefox 3+ */
    overflow-wrap: break-word;   /* CSS3 standard: Chrome & Opera 2013+ */
}

/* Use this if you also want to preserve multiple spaces in text */
table td, table th {
    white-space: -moz-pre-wrap;  /* Firefox 1.0-2.0 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* CSS3 */
}

Here is an example: http://www.jsfiddle.net/QPP8A/ (now out of date, sorry)

If you find this to hard to apply, you can use PHP's wordwrap function:

$text = "The quick brown fox jumped over the lazy dog.";
$newtext = wordwrap($text, 20, "<br />\n");