如何使用 SASS/CSS 使 HTML 表格占满宽度
Posted
技术标签:
【中文标题】如何使用 SASS/CSS 使 HTML 表格占满宽度【英文标题】：How to make HTML Table Take Full Width Using SASS/CSS 【发布时间】：2020-08-13 16:33:19 【问题描述】：我正在尝试使用仅 SASS/CSS 设置table 的样式。我将table 的width 设置为100%。但是，当我将th 元素的字体大小设置为0.8em 时，我的表格无法采用它允许的所有宽度（请注意，列没有到达右侧的边界线）。鉴于我不控制 html，如何使用 CSS 解决此问题？
SASS/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>【问题讨论】：
【参考方案1】：从表格中移除显示：块
#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>【讨论】：
如果我这样做，我会失去桌子上的圆角。我怎样才能保留它们？ 将表格放在一个 div 中，并围绕 div 的角。我已经更新了 sn-p 没有额外的div 有什么办法吗？我无法控制 HTML。
当然，去掉多余的 div。将表格显示更改为内联块。然后将td的宽度设置为100/6 = 16.66px
如果还有任意数量的列怎么办？有可扩展的方法吗？【参考方案2】：
这是我认为你想要的，我刚刚删除了 border-collapse、display:block（这使表格成为默认 CSS），这是一个 codepen with SCSS，并且这里也有一个工作的 sn-p：
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>【讨论】：
以上是关于如何使用 SASS/CSS 使 HTML 表格占满宽度的主要内容，如果未能解决你的问题，请参考以下文章
html页面比较长，body里的background图片比较短，如何设置属性使图片以拉伸方式占满页面？
android页面布局：如何使LinearLayout层占满页面，但不覆盖底部菜单栏？
html CSS / Sass：健壮/可扩展的分层CSS架构#sass #css
android页面布局：如何使LinearLayout层占满页面，但不覆盖底部菜单栏？