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>