javascript - 随着屏幕宽度的变化缩小和扩大表格宽度

Question

我希望能够在屏幕宽度减小时缩小表格的宽度，并在屏幕宽度增加时扩大表格的宽度。
我知道我可以在 CSS 和 JavaScript 中使用 @media()，但我正试图找到一种更简单的方法来做到这一点。
我目前遇到的问题是，当屏幕宽度缩小时，我表格的父 div 之外的另一个 div 与表格重叠。

这是我表格的 CSS:

#course_table {
  margin: auto;
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  border-collapse: collapse;
  padding: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  border-radius: 4px;
  width: 100%;
}

Answer 1

带有vw单位的示例代码

body { margin: 0;}
* { box-sizing: border-box; }

Table { border-collapse: collapse; margin: 0;   }
td    { border: 1px solid grey; padding: 2px 10px; }
thead { background-color: turquoise;}

table tr td:nth-child(1) { width: 30vw }
table tr td:nth-child(2) { width: 10vw }
table tr td:nth-child(3) { width: 60vw }

<table>
  <thead>
    <tr><td>A</td><td>B</td><td>C</td></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
  </tbody>
</table>

PS:这里不禁止使用魔法词...