英文:
Table doesn't format as expected
问题
I have a table that displays as I wish, however I added a button below so the user can expand and show a secondary table. However, this second table does not display like the first one and I wanted to know why that is. The second table displays to the left with no spacing between the boxes as expected.
第一个表格（显示正确）：
<div id="expenses-table">
<table class="table">
<tr>
<th>日期</th>
<th>供应商</th>
<th>金额</th>
<th>原因</th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
</table>
<br>
<br>
</div>
问题中的第二个表格不显示正确：
.table,
tr {
border: 1px solid black;
width: 80%;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
<table id="expand" style="display:none" class="table">
<tr>
<th>日期</th>
<th>供应商</th>
<th>金额</th>
<th>原因</th>
</tr>
<!-- 这里有多个重复的行 -->
</table>
<button id="expand-btn" class="button" onClick="expandTable()">展开</button>
如有其他翻译需求，请告诉我。
英文:
I have a table that displays as I wish, however I added a button below so the user can expand and show a secondary table. However, this second table does not display like the first one and I wanted to know why that is. The second table displays to the left with no spacing between the boxes as expected
First table (displays correctly)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div id="expenses-table">
<table class="table">
<tr>
<th>Date</th>
<th>Supplier</th>
<th>Amount</th>
<th>Reason</th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
</table>
<br>
<br>
<!-- end snippet -->
Second table in question, doesn't display like the first one
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.table,
tr {
border: 1px solid black;
width: 80%;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
<!-- language: lang-html -->
<table id="expand" style="display:none" class="table">
<tr>
<th>Date</th>
<th>Supplier</th>
<th>Amount</th>
<th>Reason</th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
</table>
</table>
</div>
<button id="expand-btn" class="button" onClick="expandTable()">Expand</button>
<!-- end snippet -->
答案1
得分: 1
你的要求已经翻译好了，以下是你提供的内容：
"Again! change the th tag to td for all table cells except the for header"
以及代码部分。
英文:
As you're not responding to comments or developing further more your question as requested (which is exactly the opposite of what you're required to do when asking). Imma try to guess your final goal and present the following.
Again! change the th tag to td for all table cells except the for header
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function expandTable() {
document.getElementById("expand").classList.toggle('hidden');
}
<!-- language: lang-css -->
.table,
tr {
border: 1px solid black;
width: 80%;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
.hidden {
display: none;
}
<!-- language: lang-html -->
<div id="expenses-table">
<table class="table mb-4">
<thead>
<tr>
<th>Date</th>
<th>Supplier</th>
<th>Amount</th>
<th>Reason</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
</tbody>
<tbody id="expand" class="hidden">
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
</tbody>
</table>
</div>
<button id="expand-btn" class="button" onClick="expandTable()">Expand</button>
<!-- end snippet -->
答案2
得分: -1
如果需要在另一个表格内包裹一个表格，您需要像这样操作（将<table>嵌套在<table>标记内）：
<table>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<table>
此外，CSS 无法很好地控制表格单元格。当内容较长时，表格将自动扩展，就像这样：
因此，如果您真的需要控制样式，请使用<div>而不是<table>。
英文:
If you need to wrap a table inside another table, you need to do something like this (nest a < table > inside a < table > tag):
<table>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<table>
In addition, CSS cannot control table cell well. When content are long, table will expend by itself, like this:
Therefore, use < div > instead of < table > if you really need control the style.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论