我怎样才能阻止我的 HTML 水平 table（使用 mini.css）内容消失在 header 后面

Question

我正在使用 mini.css 设计一个简单网页的样式以显示应用程序的输出。我使用以下 HTML 创建了一个水平 table，但是当我调整 window 的大小时，而不是 right-hand 列右侧的巨大空白变得越来越小，文本向左移动并开始消失在 header 后面。最终响应式设计开始并完全改变 table 布局，但在 table 变得难以辨认之前。

理解我的意思的最简单方法是尝试这个代码笔： 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>

我曾尝试将 table 包裹在各种 div class 中（容器、卡片、行、列等），但其中 none 阻止了这种效果。事实上，如果您尝试将 table 放在 class 'card large' 的 div 中，table 看起来不错，但文本完全隐藏了！我还尝试向 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>

我怎样才能阻止我的 HTML 水平 table（使用 mini.css）内容消失在 header 后面

How can I stop my HTML horizontal table (using mini.css) content vanishing behind the header

html

css

html-table

mini.css