Question

我需要为表单创建一个包含多行的表。

我坚持这部分：

This is what I need ，

这就是我想要的：

this is what I have

任何有关缩短这些细胞的帮助都会非常感激。

Answer 1

您需要使用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>

Answer 2

试试这个：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;
}

Answer 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>

仅在一行中向表中添加多个列

3 个答案: