仅在一行中向表中添加多列答案

【问题标题】：Adding multiple columns to a table in one row only仅在一行中向表中添加多列
【发布时间】：2018-02-19 17:38:15
【问题描述】：

我需要为一个表格制作一个包含多行的表格。

我被这部分困住了：

这就是我想要的：

任何有关缩短这些单元格的帮助将不胜感激。

【问题讨论】：

发布您目前获得的代码。 HTML 和 CSS。
看起来一样，只需将您的三个单选按钮放在第二列（第二个 TD）并删除最后两个。然后从 html 标记中的表格 (border=0) 中删除边框。如果您可以将您的 html 代码放在这里，我可以为您提供更多帮助

标签： html forms tabular

【解决方案1】：

试试这个：https://jsbin.com/kekecixuda/1/edit?html,css,output

// html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="main-box">
    <table border=1>
      <tr>
        <td class="bold-text">Course Information</td>
      </tr>
      <tr>
        <td>Course Name:</td>
        <td>
          <select class="select-aria">
            <option value="">Select a cource</option>
            <option value="">...</option>
            <option value="">...</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Select a section:</td>
        <td class="td-pos">
            <input type="radio" name="browser" value="a1" class="inputs-pos">1
        </td>
        <td class="td-pos">
          <input type="radio" name="browser" value="a2" class="inputs-pos">2
        </td>
        <td class="td-pos">
          <input type="radio" name="browser" value="a3" class="inputs-pos">3
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

// CSS

* {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

.main-box {
  background-color: #40b3bf;
  width: 680px;
  padding: 20px;
}

.bold-text {
  font-weight: bold;
  width: 250px;
}
.select-aria {
  width: 130px;
}

table {
  border-collapse: separate;
}

td {
  padding: 2px;
  min-width: 140px; 
}

.inputs-pos {
  margin: 0px 5px 0px 3px;

}

.td-pos {
  padding-top: 5px;
}

【讨论】：

【解决方案2】：

您需要使用 colspan。如果您希望一列看起来像 3，请设置 colspan=3 依此类推。

<table border="1">
        <tr>
            <td colspan="2">&nbsp;</td>

            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">&nbsp;</td>

        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

【讨论】：

所以我只需要让一切都变长吗？然后使这些单选按钮上的colspan = 1？我假设只是让整个表格宽度=50% 左右，这会使列更窄？
一列需要运行 2 列的长度，在 2 上会有一个 colspan，依此类推。这完全取决于其他行有多少列。

【解决方案3】：

我的草图展示了一些元素，非常简单，只是为了好玩：

table{border-collapse:collapse}
td{border:1px solid #000;padding:5px}

<table>
<tr>
<td colspan="4">Course Information</td>
</tr>
<tr>
<td>Course Name:</td>
<td colspan="3"><input type="search"></td>
</tr>
<tr>
<td>Select a section:</td>
<td><input type="radio"> 1</td>
<td><input type="radio"> 2</td>
<td><input type="radio"> 3</td>
</tr>
</table>

【讨论】：