如何将两个html元素(<th>&<td>)彼此靠近？

Question

我知道这可能是超基础的，但我无法理解。我想将名称移到同一行的标题附近，但它显示在屏幕上。这就是我的代码：

th.tableTitle {
background-color: #E3E5EE;
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
font-style: normal;
text-align: left;
vertical-align: top;
padding-bottom: 1em;
}
th.headerLabel {
background-color: red;
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
font-style: normal;
text-align: left;
vertical-align: top;
}
td.dataResponse {
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: normal;
font-size: 90%;
font-style: normal;
text-align: left;
vertical-align: top;
/*border-bottom: 1pt #BFBFBF solid; */
}

<table class="displayTable" , width="80%">
<tr>
<th colspan="12" class="tableTitle">STUDENT INFORMATION</th>
</tr>
<tr>
<th colspan="2" class="headerLabel">Student Name:</th>
<td colspan="10" class="dataResponse">Max</td>
</tr>
</table>

Answer 1

好的，从th和td中删除colspan，并将th字段的宽度设置为1%，这样它的宽度就不会根据它的文本量进行设置，然后禁用头上的换行符或其他功能，这样它就保持在同一行上

th.tableTitle {
background-color: #E3E5EE;
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
font-style: normal;
text-align: left;
vertical-align: top;
padding-bottom: 1em;
}
th.headerLabel {
background-color: red;
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
font-style: normal;
text-align: left;
vertical-align: top;
white-space: nowrap
}
td.dataResponse {
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: normal;
font-size: 90%;
font-style: normal;
text-align: left;
vertical-align: top;
/*border-bottom: 1pt #BFBFBF solid; */
}

<table class="displayTable" , width="80%">
<tr>
<th colspan="12" class="tableTitle">STUDENT INFORMATION</th>
</tr>
<tr>
<th style="width: 1%" class="headerLabel">Student Name:</th>
<td class="dataResponse">Max</td>
</tr>
</table>

Answer 2

padding-bottom增加了额外的空间。所以只需删除

th.tableTitle {
background-color: #E3E5EE;
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
font-style: normal;
text-align: left;
vertical-align: top;
}
th.headerLabel {
background-color: red;
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
font-style: normal;
text-align: left;
vertical-align: top;
}
td.dataResponse {
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: normal;
font-size: 90%;
font-style: normal;
text-align: left;
vertical-align: top;
/*border-bottom: 1pt #BFBFBF solid; */
}

<table class="displayTable" , width="80%">
<tr>
<th colspan="12" class="tableTitle">STUDENT INFORMATION</th>
</tr>
<tr>
<th colspan="2" class="headerLabel">Student Name:</th>
<td colspan="10" class="dataResponse">Max</td>
</tr>
</table>

更新：

您的表width是屏幕的80%，并且该表只有两列。所以这两列中的文本有两个很大的空白。您可以做的是设置更严格的width。或者，如果您想将当前宽度的文本向右对齐text-align: right;:

th.headerLabel {
background-color: red;
color: black;
font-family: Verdana, Arial Narrow, helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
font-style: normal;
text-align: right;
vertical-align: top;
}