gpt4 book ai didi

html - 在产品3的特征下将一条线与特征1&2相同的表格。在特征的右上角使特征3与产品1和2相同

转载 作者:行者123 更新时间:2023-11-28 05:46:23 26 4
gpt4 key购买 nike

我希望功能和产品之间一直保持垂直线。产品1&2与产品2&3相同。

我想在要素和要素1&2下使用水平线,一直到产品3。



<html>

<head>
<title>11-1</title>
<style>
.table {
;
border-collapse: collapse;
border-spacing: 0;
border-width: 0;
border-right: 0;
border-left: 0;
border-top: 0;
border-bottom: ;
text-align: center;
width: 100%;
}
th {
border: none;
}
tr td {
border-left: none;
border-right: none;
}
</style>

<head>

<body>
<table class="table" border="1px">
<tr>
<th style="background-color:silver;text-align:left ;">Features</th>
<th style="background-color:silver" ;>Product 1</th>
<th style="background-color:silver" ;>Product 2</th>
<th style="background-color:silver" ;>Product 3</th>
</tr>
<tr>
<td style="text-align:left" ;>Feature 1</td>
<td>x</td>
<td></td>
<td>x</td>

</tr>
<tr style="border-right:1" ;>
<td style="text-align:left" ;>Feature 2</td>
<td></td>
<td>x</td>
<td>x</td>
</tr>
<tr style="border-bottom:none">
<td style="text-align:left" ;>Feature 3</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</table>
</body>

</html>

最佳答案

据我了解,您必须同时使用:not():first/last-of-type来实现所需的功能。



.table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
text-align: center;
width: 100%;
}
td:not(:last-of-type) {
border-right: 3px solid red
}
tbody tr:not(:first-of-type) td {
border-bottom: 3px solid green
}
th {
border: 0;
background: silver
}
tr td {
border: 0
}
tr td:first-of-type,
tr th:first-of-type {
text-align: left
}

<table class="table">
<tr>
<th>Features</th>
<th>Product 1</th>
<th>Product 2</th>
<th>Product 3</th>
</tr>
<tr>
<td>Feature 1</td>
<td>x</td>
<td></td>
<td>x</td>

</tr>
<tr>
<td>Feature 2</td>
<td></td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>Feature 3</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</table>

关于html - 在产品3的特征下将一条线与特征1&2相同的表格。在特征的右上角使特征3与产品1和2相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37580470/

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