如何在表格中将对应E、VG、G、F、P的单选按钮水平排列？

你的问题出在每个单选按钮单独放在一个<td>单元格里，这导致它们被表格的列结构强制垂直分布。要让同一评分项的E/VG/G/F/P单选按钮水平排列，只需调整HTML结构，把同一行的所有单选按钮合并到一个单元格中，再用Flex布局实现水平排列。

调整步骤： #

1. 合并单元格：将每个评分项对应的5个<td class="radio-container">替换成一个<td>，并设置colspan="5"来占据原来的5列宽度。
2. 统一Flex容器：在合并后的单元格内创建一个.radio-group容器，用Flex布局让内部的单选按钮组水平排列。
3. 优化样式：调整CSS，确保单选按钮和标签在水平方向上均匀分布，保持视觉对齐。

修改后的完整代码： #

CSS部分

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th, td {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 水平排列的单选按钮组容器 */
.radio-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

/* 调整单选按钮和标签的间距 */
.radio-group label {
  margin-right: 5px;
}

.radio-group input[type="radio"] {
  cursor: pointer;
}

HTML部分

<center>
  <h2>|5 - Excellent||4 - Very Good||3 - Good||2- Fair||1 - Poor|</h2>
</center>

<table>
  <tr>
    <th>CRITERIA</th>
    <th>E<br>5</th>
    <th>VG<br>4</th>
    <th>G<br>3</th>
    <th>F<br>2</th>
    <th>P<br>1</th>
  </tr>
  <tr>
    <th>1. INSTRUCTION</th>
    <th colspan="5"></th>
  </tr>
  <tr>
    <th>a. Mastery of the Subject Matter</th>
    <th colspan="5"></th>
  </tr>
  <tr>
    <td>a.1 Explains the lesson clearly.</td>
    <!-- 合并单元格并放入水平排列的单选组 -->
    <td colspan="5" class="radio-group">
      <label for="a1_5">5</label>
      <input type="radio" id="a1_5" name="a1" value="5" onclick="rate('E', 5)">
      
      <label for="a1_4">4</label>
      <input type="radio" id="a1_4" name="a1" value="4" onclick="rate('VG', 4)">
      
      <label for="a1_3">3</label>
      <input type="radio" id="a1_3" name="a1" value="3" onclick="rate('G', 3)">
      
      <label for="a1_2">2</label>
      <input type="radio" id="a1_2" name="a1" value="2" onclick="rate('F', 2)">
      
      <label for="a1_1">1</label>
      <input type="radio" id="a1_1" name="a1" value="1" onclick="rate('P', 1)">
    </td>
  </tr>
  <tr>
    <td>a.2 Relates the subjects/topics to local/global developments whenever feasible and fitting.</td>
    <td colspan="5" class="radio-group">
      <label for="a2_5">5</label>
      <input type="radio" id="a2_5" name="a2" value="5" onclick="rate('E', 5)">
      
      <label for="a2_4">4</label>
      <input type="radio" id="a2_4" name="a2" value="4" onclick="rate('VG', 4)">
      
      <label for="a2_3">3</label>
      <input type="radio" id="a2_3" name="a2" value="3" onclick="rate('G', 3)">
      
      <label for="a2_2">2</label>
      <input type="radio" id="a2_2" name="a2" value="2" onclick="rate('F', 2)">
      
      <label for="a2_1">1</label>
      <input type="radio" id="a2_1" name="a2" value="1" onclick="rate('P', 1)">
    </td>
  </tr>
</table>

关键说明： #

• colspan="5"确保合并后的单元格占据原来的5列宽度，和表头对齐。
• .radio-group的justify-content: space-around让每个单选按钮组在单元格内均匀分布，视觉上更整齐。
• 移除了原来每个单选按钮单独的<td>，避免表格列结构限制排列方向。

内容的提问来源于stack exchange，提问作者Serjin Conche