如何阻止HTML水平表（使用mini.css）内容消失在标题后面

Question

我正在使用mini.css为一个简单的网页设置样式，以显示应用程序的输出。我使用下面的HTML创建了一个水平表格，但是当我调整窗口的大小时，而不是右侧列右侧的巨大空格变小时，文本向左移动并开始在标题后面消失。最终，响应性的设计开始工作，完全改变了表格的布局，但在此之前，表格是难以辨认的。

要理解我的意思，最简单的方法就是试试下面的代码：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类（容器、卡片、行、列等）包装表，但没有一个能阻止这种效果。事实上，如果您尝试将表放置在类'Card Large'的div中，表看起来很棒，但文本是完全隐藏的！我还尝试添加一个样式到td标记以右对齐文本，但我并不真的希望它右对齐，在任何情况下，它没有工作。我可以在我的页面中添加什么CSS来防止这种奇怪的行为？

Answer 1

我用padding-left解决了屏幕大小不同的问题。

null

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

html prettyprint-override"><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>