Format <td> to handle linefeed and wrap long text in a table

When a table cell needs to properly display texts with linefeed and really long text with no whitespace (i.e., long URL), try the following styles.

<table style="table-layout: fixed">
  <tbody>
    <tr>
      <td>Some Links</td>
      <td style="white-space: pre-wrap; word-wrap: break-word">
        ...
      </td>
    </tr>
  </tbody>
</table>

Below is a problematic example of table cell display. The long URL text, which has no whitespace character stretches the table's width beyond the specified table width of 400px.

<table style="width: 400px; border: 1px solid white; color: white">
  <tbody>
    <tr>
      <td style="width: 100px; border: 1px solid white; vertical-align: top; ">Some Links</td>
      <td style="border: 1px solid white;" >Link Example: 
        https://www.google.com/maps/@33.7338729,-117.8530829,3a,75y,304h,90t/data=!3m7!1e1!3m5!1suAg9o6LKzX3</td">
    </tr>
  </tbody>
</table>

Some Links

Link Example: https://www.google.com/maps/@33.7338729,-117.8530829,3a,75y,304h,90t/data=!3m7!1e1!3m5!1suAg9o6LKzX3

Below is better way to display the content with proper line-feed in order to keep the specified table width of 400px;

<table style="width: 400px; border: 1px solid white; color: white; table-layout: fixed;">
  <tbody>
    <tr>
      <td style="width: 100px; border: 1px solid white; vertical-align: top; ">Some Links</td>
        <td style="border: 1px solid white; 
          white-space: pre-wrap; word-wrap: break-word;" >Link Example:
https://www.google.com/maps/@33.7338729,-117.8530829,3a,75y,304h,90t/data=!3m7!1e1!3m5!1suAg9o6LKzX3</td>
    </tr>
  </tbody>
</table>

Some Links

Link Example: https://www.google.com/maps/@33.7338729,-117.8530829,3a,75y,304h,90t/data=!3m7!1e1!3m5!1suAg9o6LKzX3