html - table is not being responsive with css properly on smaller devices?

Question

I am coming to a problem where I am trying to make my table responsive. It work in this case but table-layout: fixed; make it worked but, when I resize my columns get together. I use word-break: break-word; but it just made my text squished. When I comment the table-layout:fixed and resize browser it gets my data crushed. How to make it responsive in my code below. thanks for the help.

Here is my code:

table {
  table-layout: fixed;
  margin: auto;
}

th,
td {
  padding: 5px 10px;
}

thead,
tfoot {
  background: #f9f9f9;
  display: table;
  width: 100%;
  width: calc(100% - 18px);
}

tbody {
  overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  word-break: break-word
}

<table>
  <tbody>
    <tr>
      <th></th>
      <th class="right-header">Step 1</th>
      <th class="right-header">Step 2</th>
      <th class="right-header">Step 3</th>
      <th class="right-header">Step 4</th>
      <th class="right-header">Step 5</th>
      <th class="right-header">Step 6</th>
      <th class="right-header">Step 7</th>
      <th class="right-header">Step 8</th>
    </tr>
    <tr class="odd">
      <td class="left-header">Test</td>
      <td class="left-header"> $57.36</td>
      <td class="left-header"> $58.94</td>
      <td class="left-header"> $60.56</td>
      <td class="left-header"> $62.23</td>
      <td class="left-header"> $65.70</td>
      <td class="left-header"> $69.37</td>
      <td class="left-header"> $73.23</td>
      <td class="left-header"> $77.31</td>
    </tr>
    <tr class="odd">
      <td class="left-header">Test</td>
      <td class="left-header"> $4,588.80</td>
      <td class="left-header"> $4,715.20</td>
      <td class="left-header"> $4,844.80</td>
      <td class="left-header"> $4,978.40</td>
      <td class="left-header"> $5,256.00</td>
      <td class="left-header"> $5,549.60</td>
      <td class="left-header"> $5,858.40</td>
      <td class="left-header"> $6,184.80</td>
    </tr>
    <tr class="odd">
      <td class="left-header">Test</td>
      <td class="left-header"> $119,767.68</td>
      <td class="left-header"> $123,066.72</td>
      <td class="left-header"> $126,449.28</td>
      <td class="left-header"> $129,936.24</td>
      <td class="left-header"> $137,181.60</td>
      <td class="left-header"> $144,844.56</td>
      <td class="left-header"> $152,904.24</td>
      <td class="left-header"> $161,423.28</td>
    </tr>
  </tbody>
</table>

标签： htmlcss

Answer 1

这种长列是没有办法的。对于响应式布局，您必须重新考虑一些不同的东西（可能是用相关标题堆叠列）。它同样适用于 html 电子邮件。