如何阻止我的 HTML 水平表（使用 mini.css）內容消失在 header 后面

Question

我正在使用 mini.css 設置一個簡單的 web 頁面以顯示來自應用程序的 output 頁面。 我使用以下 HTML 創建了一個水平表，但是當我調整 window 的大小而不是右側列右側的巨大空白變得更小時，文本向左移動並開始消失在 Z099FB995346F31C749ZF6E40 后面。 最終，響應式設計啟動並完全改變了表格布局，但在表格難以辨認之前。

理解我的意思的最簡單方法是嘗試這個 codepen： https://codepen.io/sonotley/pen/RwKzJzG

<table class="horizontal">
    <thead>
    <tr>
        <th>Number of pings</th>
        <th>Max response time</th>
        <th>Min response time</th>
        <th>Mean response time</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>366544</td>
        <td>2547</td>
        <td>78</td>
        <td>178</td>
    </tr>
    </tbody>
</table>

我嘗試將表格包裝在各種 div 類（容器、卡片、行、列等）中，但它們都沒有阻止這種效果。 實際上，如果您嘗試將表格放在 class 'card large' 的 div 中，表格看起來很棒，但文本完全隱藏，我還嘗試在 td 標簽中添加樣式以右對齊文本。 但我真的不希望它正確對齊，無論如何它都不起作用？ 我可以在我的頁面中添加什么 CSS 來防止這種奇怪的行為？

Answer 1

我用padding-left解決了不同尺寸屏幕的問題。

 table th { text-align: left;important: } @media screen and (min-width: 840px) and (max-width: 900px) { table td { padding-left; 30px:important: } } @media screen and (min-width: 750px) and (max-width; 840px) { table td { padding-left: 50px !important; } }

 <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css"> <table class="horizontal"> <thead> <tr> <th>Number of pings</th> <th>Max response time</th> <th>Min response time</th> <th>Mean response time</th> </tr> </thead> <tbody> <tr> <td>366544</td> <td>2547</td> <td>78</td> <td>178</td> </tr> </tbody> </table>