时间戳

首页 > 解决方案 > 在 HTML/CSS 中制作响应式表格

html - 在 HTML/CSS 中制作响应式表格

问题描述

<table align="center" border="0" border-collapse:="" cellpadding="5" cellspacing="5" collapse="" style="height: auto; width: 1229px; max-width: 100%;">

我想知道如何让我的表格自行重新调整，所以当我调整浏览器窗口或移动设备的大小时，表格会相应地自行调整。

标签： htmlcsswebhtml-tableresize

解决方案

如果您有在表格中最好显示的数据，那么您将知道您有多少列，并且将了解它们应该相对于彼此有多宽。您还将决定您希望在非常窄的设备上发生什么 - 是否可以立即看到要全部压缩到整行的单元格，或者如果内容不合适，用户是否可以水平滚动单元格在可用的屏幕上好吗？为了解决这个问题，您可能需要为表格本身或其容器设置一个最小宽度。

一旦解决了这个问题，您就可以使用 CSS 相对于表格的整体宽度来设置每个单元格的样式。在最简单的情况下，您希望它们都具有相同的宽度，您可以给它们每个 x% 的容器宽度，其中 x* 列数 = 100。

否则，您可以酌情使用 CSS 选择器，例如 td:nth-child(1) {width: 10%;} td:nth-child(2) {width:15%;} 等等。

同样对于单元格高度 - 您可能希望根据行号而有所不同。

就这样继续下去，但是使用 CSS 而不是已弃用的特定于表格的属性，您有很大的灵活性，例如在哪些行和列获得什么填充或颜色或边框以及它们的基本尺寸。

如果除了最大和最小表格宽度之外，所有维度都是相对的，您可能不需要使用媒体查询。

推荐阅读