使li内容不与列边框重叠

Question

我有html表，在该表的列中我有列表内容，但我在列上的列表显示有问题。当列表内容太长时，内容重叠边框列在我移动屏幕时发生。我想让它不与边界重叠，但我仍然无法做到。

这是问题的简单视觉。

在桌面浏览器中显示正确，但当我进入手机屏幕时，我得到了这个。

这是代码。

<table style="width: 100%; max-width: 100%; margin-bottom: 20px;">
  <thead>
    <tr>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>
        <ul style="list-style: none; text-align: left;">
          <li>List Content List Content List Content List Content</li>
        </ul>
      </td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Answer 1

我无法在代码中看到问题，因为它工作得很好

tr td,
tr th {
  border: 1px solid;
}
ul {
  padding: 0;
}

<table style="width: 100%; max-width: 100%; margin-bottom: 20px;">
  <thead>
    <tr>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>
        <ul style="list-style: none; text-align: left;">
          <li>List Content List Content List Content List ContentList Content List Content List Content List Content v List Content List Content</li>
        </ul>
      </td>
      <td>Content</td>
    </tr>
  </tbody>
</table>