gpt4 book ai didi

css - 缩进层次表结构

转载 作者:行者123 更新时间:2023-11-28 13:52:37 26 4
gpt4 key购买 nike

我正在尝试创建嵌套表的分层显示,其中每个子级别都从父级别进一步缩进。我愿意使用表格或 div。我最接近的是下面。它在 IE 中看起来基本正确(除了右边的边框混在一起)。在 Chrome 中,子项边框超出了右侧的父项。

我也愿意使用 div。

<html> 
<head>
<style type="text/css">
.ItemTable
{
width: 100%;
margin-left: 20px;
border: solid 1px #dbdce3;
}
</style>
</head>
<body>
<table class="ItemTable">
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>Item 1A</td>
</tr>
</td>
</tr>
</table>
</body>
</html>

最佳答案

看起来像一些东西。您的子表缺少它的关闭标记,我向 TD 添加了填充以帮助缩进:

<style type="text/css">
.ItemTable
{
width: 100%;

border: solid 1px #dbdce3;
}
.ItemTable td
{
width: auto;
padding-left: 20px;
border: solid 1px #dbdce3;
}
</style>


<table class="ItemTable">
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
Item 1A
</td>
</tr>
</table>
</td>
</tr>
</table>

在 Chrome、FF、IE6、IE7 和 Safari 中对其进行了测试,看起来可以正常工作。

关于css - 缩进层次表结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/786219/

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