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

单位为 v 的示例代码

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：此处不禁止使用魔术词...

Answer 2

以'vw'为单位使用宽度，即查看端口宽度！

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

随着屏幕宽度的变化缩小和扩展表格宽度

2 个答案: