求助：调整HTML表格表单样式以匹配示例效果

问题排查与调整点 #

1. 边框细节统一：原表格使用border-spacing但单元格边框与外边框衔接松散，表单元素（input/select/textarea）默认自带边框与设计背景不协调，需统一样式。
2. 表单元素样式修正：单选框、复选框无法直接修改背景色（浏览器默认控件限制），需通过父容器补全背景；文本域存在默认空白内容，需清理。
3. 按钮样式补全：原按钮无边框，若示例有边框需添加；按钮间距过小，需调整避免拥挤。
4. 单元格内边距优化：第一列右内边距过大，适当缩小以匹配视觉比例。

修改后的完整代码 #

CSS 代码

table {
  border: solid 1px black;
  border-collapse: separate;
  border-spacing: 4px;
  font-family: 'Times New Roman', Times, serif;
}

td {
  background-color: #00ccff;
  border: solid 1px black;
  padding: 6px 3px;
}

.first-column {
  padding-right: 80px;
  padding-left: 11px;
  text-align: left;
}

.second-column {
  padding-left: 11px;
}

.table-heading {
  background-color: #ffffa9;
  text-align: center;
  color: #ec0d01;
  font-size: 25px;
  border: solid 1px black;
  padding: 8px 0;
}

/* 统一表单元素样式 */
select, input[type="text"], input[type="password"], textarea {
  background-color: #cdffcc;
  border: solid 1px black;
  padding: 4px;
  box-sizing: border-box;
}

select, input[type="text"], input[type="password"] {
  width: 500px;
}

textarea {
  width: 500px;
  height: 80px;
  resize: vertical;
}

.input-file {
  text-align: center;
  background-color: #00ccff;
}

/* 复选框/单选框父容器背景 */
.second-column div {
  background-color: #cdffcc;
  padding: 6px;
  border: solid 1px black;
  display: inline-block;
}

button {
  background-color: #cdffcc;
  padding: 10px 20px;
  border: solid 1px black;
  width: 250px;
  margin: 0 4px;
  cursor: pointer;
}

.buttons {
  text-align: center;
  padding: 8px 0;
  background-color: #00ccff;
}

HTML 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户表单</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form>
    <table>
      <thead>
        <tr>
          <th class="table-heading" colspan="2">User Form</th>
        </tr>
      </thead>
      <tbody class="table-body">
        <tr>
          <td class="first-column">Enter Name</td>
          <td class="second-column"><input type="text" required></td>
        </tr>
        <tr>
          <td class="first-column">Enter Password</td>
          <td class="second-column"><input type="password" required></td>
        </tr>
        <tr>
          <td class="first-column">Enter Address</td>
          <td class="second-column"><textarea name="address" cols="40" rows="3"></textarea></td>
        </tr>
        <tr>
          <td class="first-column">Select Game</td>
          <td class="second-column">
            <div>
              <input type="checkbox">Hockey<br>
              <input type="checkbox">Football<br>
              <input type="checkbox">Badminton<br>
              <input type="checkbox">Cricket<br>
              <input type="checkbox">Volleyball<br>
            </div>
          </td>
        </tr>
        <tr>
          <td class="first-column">Gender</td>
          <td class="second-column">
            <div>
              <input type="radio" name="gender">Male
              <input type="radio" name="gender">Female
            </div>
          </td>
        </tr>
        <tr>
          <td class="first-column">Select your age</td>
          <td class="second-column">
            <div class="age-select">
              <select>
                <option value="" disabled selected hidden>select</option>
                <option value="">18-24</option>
                <option value="">25-34</option>
                <option value="">35-44</option>
                <option value="">45-59</option>
                <option value="">60+</option>
              </select>
            </div>
          </td>
        </tr>
        <tr>
          <td class="input-file" colspan="2"><input type="file"></td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="buttons">
              <button>Click Me</button>
              <button type="reset">Reset</button>
              <button type="submit">Submit Form</button>
            </div>
          </td>
        </tr>
    </table>
  </form>
</body>
</html>

调整说明 #

• 统一所有边框为1px solid black，确保表格内外边框、表单元素边框风格一致；
• 为复选框/单选框添加带背景的父容器，解决默认控件无法直接修改背景的问题；
• 优化单元格内边距和按钮间距，提升视觉舒适度；
• 清理文本域默认空白内容，修正提交按钮的type="submit"属性；
• 为表单元素添加box-sizing: border-box，避免宽度设置受内边距影响。

内容的提问来源于stack exchange，提问作者Tijana Ilieva