JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
  <table id="credentials" width="50%">
    <thead>
      <tr>
        <th>With borders</th>
        <th>Without</th>
      </tr>
    </thead>
    <tbody>
      <!-- filled by js -->
    </tbody>
  </table>


</body>

CSS

td {
  white-space: pre-wrap;
}

JavaScript

var blank = " blank ";
var no_blank = "no_blank";

$("tbody").append(
  $("<tr>")
  .append($("<td>").text("|"+blank+"|"))
  .append($("<td>").text(blank))	// why isn't the blank displayed?
);

$("tbody").append(
  $("<tr>")
  .append($("<td>").text("|"+no_blank+"|"))
  .append($("<td>").text(no_blank))
);