gpt4 book ai didi

html - 在 CSS 表格中显示表格

转载 作者:行者123 更新时间:2023-11-27 23:44:36 25 4
gpt4 key购买 nike

在 CSS 表格中,我有一个带有 id=inner-table 的常规表格。 CSS 表有 display:table 并且内表似乎被视为 CSS 表外的单元格。因此,第一列扩展到内表的宽度。如何防止内部表格表现得像外部 CSS 表格的单元格?我已经尝试为内表设置 display: block,但这不起作用。这是代码:

    .Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.Row {
display: table-row;
}
.Cell {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
<body>
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
</div>

<div id='inner-table'>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tr>
<td>A</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
<td>B</td>
</tr>
</table>
</div>

<div class="Row">
<div class="Cell">
<p>Row 2 Column 1</p>
</div>
<div class="Cell">
<p>Row 2 Column 2</p>
</div>
<div class="Cell">
<p>Row 2 Column 3</p>
</div>
</div>
</div>

</body>

最佳答案

#inner-table 之前关闭第一个 .Table 的 div,而不是像这样在 Row div 之后关闭它:

Demo

<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
</div>
</div>
<div id='inner-table'>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tr>
<td>A</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
<td>B</td>
</tr>
</table>
</div>
<div class="Row">
<div class="Cell">
<p>Row 2 Column 1</p>
</div>
<div class="Cell">
<p>Row 2 Column 2</p>
</div>
<div class="Cell">
<p>Row 2 Column 3</p>
</div>
</div>

关于html - 在 CSS 表格中显示表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30473304/

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