gpt4 book ai didi

html - Rowspan 未扩展

转载 作者:行者123 更新时间:2023-11-27 22:53:22 27 4
gpt4 key购买 nike

我用 html 制作了一个表格,但是当我尝试增加表格单元格的高度时,它并没有增加。

这是 index.html 文件:

<!DOCTYPE html>

<!--Begin-->
<html>
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<h1>Cards</h1>

<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Card</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Charizard</td>
<!--<td><img src="https://52f4e29a8321344e30ae-0f55c9129972ac85d6b1f4e703468e6b.ssl.cf2.rackcdn.com/products/pictures/1105091.jpg">Charizard card</img></td>-->
</tr>
</table>
</body>
</html>

这是 style.css 文件:

table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}

thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}

tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}

th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
padding: 20px;
text-align: left;
width: 33.3333%;
}

这是它的样子:

a busy cat

但这不是我想要的,因为我在代码中放置了 rowspan="2" 所以这是我期望的示例

nothging

但为什么第一张图片是这段代码的结果而不是第二张呢?

最佳答案

您的 HTML 代码中没有第三行,这就是该单元格不会跨越第三行的原因。一旦添加第三行,rowspan 就会看起来像预期的那样:

table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}

thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}

tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}

th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
padding: 20px;
text-align: left;
width: 33.3333%;
}
<html>
<head>
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<h1>Cards</h1>

<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Card</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>Charizard</td>
<!--<td><img src="https://52f4e29a8321344e30ae-0f55c9129972ac85d6b1f4e703468e6b.ssl.cf2.rackcdn.com/products/pictures/1105091.jpg">Charizard card</img></td>-->
</tr>
<tr>
<td>Row 3, second cell</td>
</tr>
</table>
</body>
</html>

关于html - Rowspan 未扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57747733/

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