使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內容不重疊列邊框

回答

相關問題