css中按比例缩小表格

CSS中的表格是网页设计中一个常见的元素，大多数的表格都需要在不同的设备上呈现不同的大小，通常，我们通过改变表格的宽度来适应不同的屏幕大小。但是，这种方法可能在某些情况下不太合适，因为表格变形会影响它的可读性和布局。 而按比例缩放表格大小是另一种可行的方法，可以避免这些问题。

table {
  width: 100%;
  height: auto;
  max-width: 700px;
}

td {
  padding: 20px;
}

@media only screen and (min-width: 768px) {
  table {
    max-width: none;
    width: 80%;
  }
}

@media only screen and (min-width: 1200px) {
  table {
    width: 60%;
  }
} 

上面的代码展示了如何使用CSS按比例缩放表格大小。 首先，我们定义了整个表格的宽度为100%，这意味着表格将在其父元素的100%宽度内拓展。 然后通过将max-width值设置为700px,我们限制了表格的最大宽度为700px，以避免表格过度变形。

接下来，我们使用@media查询来应用按比例缩小表格的样式。 当设备的视口宽度大于768px时，我们将表格的max-width设置为none，width设置为80%。这将使表格的宽度在768px和1200px之间缓慢增加，并且保持了原始表格的相对比例。

最后，当设备的视口宽度大于1200px时，将表格的宽度设置为60%，实现了按比例缩放表格的目标。 当设备的视口宽度改变时，表格将按照定义的规则自动调整大小。