随着屏幕宽度的变化缩小和扩大 table 宽度

Question

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

这是我的table的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' 单位的宽度，即视口宽度！

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

Answer 2

带有 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: 这里不禁止使用魔术词...

随着屏幕宽度的变化缩小和扩大 table 宽度

Shrink and expand table width as screen width changes

html

javascript

css

html-table

screen-size