英文:
Customize space for vertical table header and table data
问题
我有一个下面有垂直标题的表格。我试图找到一种方法来移除表头和表格数据内部的额外空格。以下是我构建表格的方式。
<table>
<tr>
<th class="field">项目编号：</th>
<td class="column">XXX 1234（位置）</td>
</tr>
<tr>
<th class="field">数值：</th>
<td class="column">100,000 - 150,000 CM</td>
</tr>
<tr>
<th class="field">项目状态：</th>
<td class="column">已通过</td>
</tr>
</table>
表格图片-
我尝试重置表头和表格行的填充和边距，但我不认为那真的是解决方法。
英文:
I have a table below with vertical headers. I'm trying to find a way to remove the extra space inside the table header and table data. Below is how I constructed my table.
<table>
<tr>
<th class="field">Item id number:</th>
<td class="column">XXX 1234 (Location)</td>
</tr>
<tr>
<th class="field">Values:</th>
<td class="column">100,000 - 150,000 CM</td>
</tr>
<tr>
<th class="field">Item status:</th>
<td class="column">Passed</td>
</tr>
</table>
Table image-
I tried resetting the padding and margin for the table header and table row but I don't think that's really the solution to it.
答案1
得分: 0
这种方法是将宽度和不换行结合起来：
.field {
text-align: start;
font-weight: 400;
width: 1%;
white-space: nowrap;
}
祝编码愉快。
英文:
The approach is combine width and nowrap like that:
.field {
text-align: start;
font-weight: 400;
width: 1%;
white-space: nowrap;
}
Happy coding.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论