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

user_11432434 0
Viewed 71

I am using mini.css to style a simple web page to show output from an application. I have created a horizontal table using the following HTML, but when I resize the window rather than the huge whitespace at eth right of the right-hand column getting smaller, the text moves left and starts to vanish behind the header. Eventually the responsive design kicks in and changes the table layout completely, but before the table is illegible.

Easiest way to understand what I mean is to try this 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>

I have tried wrapping the table in various div classes (containers, cards, rows, columns etc) but none of them prevent this effect. In fact if you try placing the table inside a div of class 'card large' the table looks great, but the text is completely hidden! I also tried adding a style to the td tag to right align the text, but I don't really want it right aligned an in any case it didn't work. What CSS could I add to my page to prevent this odd behaviour?

mini.css html-table css html
1 Answers

I solved the problem with different sizes of screens with 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>

user_150195360
Related