使li内容不重叠列边框

我有html表格，并在该表的列中我有列表内容，但列列表显示列上有一些问题。当列表内容太长时，我在手机屏幕中会发生与内容重叠的内容。我想让它不与边界重叠，但我仍然无法做到。使li内容不重叠列边框

这是问题的简单视觉。

这是正确显示当桌面浏览器，但是当我移动到手机屏幕，我得到这个。

这是代码。

<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>

来源

2017-04-19 Antonio

您可以包括一些代码？ – GvM

是的，代码请。为什么你在表格中有一个内联列表？ –

@GvM我只是做标准的代码表和ul li – Antonio

我不能看到你的代码中的问题，因为它工作得很好

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>

来源

2017-04-19 03:39:58 GvM

其实我在手机屏幕上看到了这个。我会再次编辑我的问题。 – Antonio

你做了什么手机屏幕布局？ – GvM

我什么也没做。这就是我想问的问题，我必须在手机屏幕代码中做什么？ – Antonio

使li内容不重叠列边框

回答

相关问题