gpt4 book ai didi

html - 如何在 html 表格中获得连续的顶部和底部边框

转载 作者:太空狗 更新时间:2023-10-29 14:46:06 24 4
gpt4 key购买 nike

我正在编写一个程序,该程序将生成一个用于显示某些数据的 html 文件。我需要对齐所有列,所以我尝试使用单个 html 表,但我希望在某些行之间有水平实线来分隔数据。使用 border-topborder-bottom 我已经能够达到我想要的大部分方式,但是这产生的水平线不是实线(见图片)。

image from chrome broswer

我的问题是:

  1. 如何在我的表中的某些行之间获得实心水平线
  2. 另外,一个小问题,有没有更好的方法在左侧列的行标签和数据之间留出一点空间。目前我正在指定一个空白列。
该图像背后的 html 如下:

<html>
<head>
<meta HTTP-EQUIV="Content-Type" Content="text/html; charset=Windows-1252">
<style type="text/css">
tr.border_top td {
border-top:1pt solid black;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}
</style>
</head>
<body bgcolor=white><b>DATA</b></p>
<table>
<col align="left"></col>
<col width=20></col>
<col align="right"></col>
<col align="right"></col>
<col align="right"></col>
<col align="right"></col>
<tr class="border_top">
<td><b>XYZ1</b></td>
<td></td>
<td>2.120</td>
<td><span style="color:blue">2.280</span></td>
<td><span style="color:blue">2.810</span></td>
<td>3.000</td>
</tr>
<tr class="border_bottom">
<td><b>ABC1</b></td>
<td></td>
<td>1.370</td>
<td><span style="color:blue">1.550</span></td>
<td>1.690</td>
<td><span style="color:blue">1.780</span></td>
</tr>
<tr>
<td><b>XYZ2</b></td>
<td></td>
<td><span style="color:blue">1.900</span></td>
<td>1.940</td>
<td>2.050</td>
<td><span style="color:blue">2.100</span></td>
</tr>
<tr class="border_bottom">
<td><b>ABC2</b></td>
<td></td>
<td><span style="color:blue">1.910</span></td>
<td>1.950</td>
<td>2.060</td>
<td><span style="color:blue">2.100</span></td>
</tr>
</table>
</body>
</html>

最佳答案

在 CSS 中添加删除默认的 border-spacing 并向单元格添加 padding

table { border-spacing:0 }
td { padding:10px; }

JSFiddle Demo

关于html - 如何在 html 表格中获得连续的顶部和底部边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17237966/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com