[英]How to make HTML Table Take Full Width Using SASS/CSS
我正在嘗試僅使用 SASS/CSS 來設置table的樣式。 我已將table的width設置為100% 。 但是，當我將th元素的 font-size 設置為0.8em時，我的表格無法采用它允許的所有寬度（請注意，列沒有到達右側的邊界線）。 鑒於我不控制 HTML，如何使用 CSS 解決此問題？
table { color: black; background-color: white; border-color: black; border-style: solid; border-width: 0 1px 1px 1px; border-radius: 5px; border-collapse: collapse; border-spacing: 0; display: block; overflow: auto; width: 100%; thead { th { color: white; background-color: black; font-weight: bold; font-size: 0.8em; padding: 5px 10px; vertical-align: bottom; } th:first-child { border-top-left-radius: 5px; } th:last-child { border-top-right-radius: 5px; } } tbody { td { border-top: 1px solid gray; padding: 5px 10px; vertical-align: top; } tr:nth-child(2n) { background-color: lightgray; } } }
<table> <thead> <tr> <th>Method</th> <th>Runtime</th> <th align="right">Mean</th> <th align="right">Ratio</th> <th align="right">Gen 0/1k Op</th> <th align="right">Allocated Memory/Op</th> </tr> </thead> <tbody> <tr> <td>Baseline</td> <td>Clr</td> <td align="right">1.833 us</td> <td align="right">1.00</td> <td align="right">2.0542</td> <td align="right">6.31 KB</td> </tr> </tbody> </table>這是我認為你想要的，我剛剛刪除了border-collapse ， display:block （這使表格成為默認 CSS），這是一個帶有 SCSS的代碼筆，一個工作片段也在這里：
table { color: black; background-color: white; border-color: black; border-style: solid; border-width: 0 1px 1px 1px; border-radius: 5px; border-collapse: separte; border-spacing: 0; display: table; overflow: auto; width: 100%; } table thead th { color: white; background-color: black; font-weight: bold; font-size: 0.8em; padding: 5px 10px; vertical-align: bottom; } table thead th:first-child { border-top-left-radius: 5px; } table thead th:last-child { border-top-right-radius: 5px; } table tbody td { border-top: 1px solid gray; padding: 5px 10px; vertical-align: top; } table tbody tr:nth-child(2n) { background-color: lightgray; }
<table> <thead> <tr> <th>Method</th> <th>Runtime</th> <th align="right">Mean</th> <th align="right">Ratio</th> <th align="right">Gen 0/1k Op</th> <th align="right">Allocated Memory/Op</th> </tr> </thead> <tbody> <tr> <td>Baseline</td> <td>Clr</td> <td align="right">1.833 us</td> <td align="right">1.00</td> <td align="right">2.0542</td> <td align="right">6.31 KB</td> </tr> </tbody> </table>
從表中刪除顯示：塊
#container,tr{ width:100%; } html,body{ width:100%; } #container{ border-radius:15px; background-color:black; } table { color: black; background-color: white; border-color: black; border-style: solid; border-width: 0 1px 1px 1px; border-radius: 5px; border-collapse: collapse; border-spacing: 0; overflow: auto; width: 98%; margin:0 auto; } th { color: white; background-color: black; font-weight: bold; font-size: 0.8em; padding: 5px 10px; vertical-align: bottom; } th:first-child { border-top-left-radius: 5px; } th:last-child { border-top-right-radius: 5px; } td { border-top: 1px solid gray; padding: 5px 10px; vertical-align: top; } tr:nth-child(2n) { background-color: lightgray; }
<html> <body> <div id='container'> <table> <thead> <tr> <th>Method</th> <th>Runtime</th> <th align="right">Mean</th> <th align="right">Ratio</th> <th align="right">Gen 0/1k Op</th> <th align="right">Allocated Memory/Op</th> </tr> </thead> <tbody> <tr> <td>Baseline</td> <td>Clr</td> <td align="right">1.833 us</td> <td align="right">1.00</td> <td align="right">2.0542</td> <td align="right">6.31 KB</td> </tr> </tbody> </table> </div> </body> </html>
如何使圖像占據屏幕的整個寬度？ （HTML，CSS）
[英]how do i make the image take the full width of the screen? (html, css)
CSS - MaterialUI - 如何使表格始終采用全寬，而不需要水平滾動？
[英]CSS - MaterialUI - How can I make a table always take the full width, and not need horizontal scroll?
如何使用 Bootstrap 使容器在手機設備中占據全寬
[英]How to make container take full width in phone devices using Bootstrap
CSS：如何使自定義文件上傳按鈕變為全角（按鈕有效）
[英]CSS: How to make custom file upload button take full width (button works)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.