时间戳

首页 > 解决方案 > 如何阻止我的 HTML 水平表（使用 mini.css）内容消失在标题后面

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

问题描述

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

理解我的意思的最简单方法是尝试这个 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 类（容器、卡片、行、列等）中，但它们都没有阻止这种效果。事实上，如果您尝试将表格放在“大卡片”类的 div 中，表格看起来很棒，但文本完全隐藏了！我还尝试向 td 标签添加样式以右对齐文本，但我真的不希望它右对齐，无论如何它都不起作用。我可以在我的页面中添加什么 CSS 来防止这种奇怪的行为？

标签： htmlcsshtml-tablemini.css

解决方案

我用不同尺寸的屏幕解决了这个问题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>

推荐阅读