在 HTML/CSS 中制作響應式表格

Question

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

我想知道如何讓我的表格自行重新調整，因此當我調整瀏覽器窗口或移動設備的大小時，表格會相應地自行調整。

Answer 1

您想要使用的是媒體查詢，它允許您根據屏幕/設備的大小選擇內容在屏幕上的位置和位置。

看看這些以進一步參考：

https://www.w3schools.com/css/css3_mediaqueries.asp

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

如果您的用例可能，您可以考慮使用 CSS 網格作為創建響應式表格的一種方式

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Answer 3

在我的例子中，我給了你一個自適應table的例子。 自適應以 800 像素寬度觸發。 希望對你有幫助。

 table { border-collapse: collapse; border-spacing: 0; width: 100%; overflow: hidden; } thead { background-color: #E5E5E5; } tr:nth-child(even) { background-color: #F2F2F2; } th, td { padding: 15px; text-align: center; } @media(max-width: 800px) { table { border: 0; } thead { display: none; } tr { display: block; margin: 0 0 20px 0; } td { display: block; text-align: right; } td:before { content: attr(aria-label); float: left; font-weight: bold; } td:last-child { border-bottom: 0; } tr:nth-child(odd){ background-color: #F2F2F2; } tr:nth-child(even){ background-color: #FFFFFF; border-width: 3px 0 3px 0; border-style: solid; border-color: #E5E5E5; } }

 <table> <thead> <tr> <th scope="col">filed 1</th> <th scope="col">filed 2</th> <th scope="col">filed 3</th> <th scope="col">filed 4</th> <th scope="col">filed 5</th> </tr> </thead> <tbody> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> <tr> <td scope="row" aria-label="filed 1">simple text 1</td> <td aria-label="filed 2">simple text 2</td> <td aria-label="filed 3">simple text 3</td> <td aria-label="filed 4">simple text 4</td> <td aria-label="filed 5">simple text 5</td> </tr> </tbody> </table>

Answer 4

如果您有最好在表格中顯示的數據，那么您就會知道您有多少列，並且會知道它們之間的相對寬度應該是多少。 您還將決定要在非常窄的設備上發生的事情 - 是否可以立即看到要壓縮到整行的單元格，或者用戶是否可以在不適合的情況下水平滾動單元格在可用的屏幕上好嗎？ 為了解決這個問題，您可能希望為表格本身或其容器設置最小寬度。

確定后，您可以使用 CSS 相對於表格的整體寬度設置每個單元格的樣式。 在最簡單的情況下，您希望它們都具有相同的寬度，您可以給它們每個容器寬度的 x%，其中 x*列數 = 100。

否則，您可以使用 CSS 選擇器，如 td:nth-child(1) {width: 10%;} td:nth-child(2) {width:15%;} 等等。

同樣對於單元格高度 - 您可能希望根據行號而有所不同。

依此類推，但使用 CSS 而不是已棄用的特定於表的屬性，您有很大的靈活性，例如，在哪些行和列獲得哪些填充、顏色或邊框以及它們的基本尺寸方面。

如果您保持所有維度（除了最大和最小表格寬度）相對，您可能不需要使用媒體查詢。