跨表HTML扩展textarea

Question

我正在尝试在表格中添加文本区域，但它只适合一列，但我想扩展以覆盖所有列的整个宽度。 目前显示为：

我的代码：

<table>
  <tr>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Criteria 1</td>
    <td><input type="radio" name="experiencebx1" required value="1" id="experiencebx1_1" /></td>
    <td><input type="radio" name="experiencebx1" value="2" id="experiencebx1_2" /></td>
    <td><input type="radio" name="experiencebx1" value="3" id="experiencebx1_3" /></td>
    <td><input type="radio" name="experiencebx1" value="4" id="experiencebx1_4" /></td>
    <td><input type="radio" name="experiencebx1" value="5" id="experiencebx1_5" /></td>
    <td><input type="radio" name="experiencebx1" value="6" id="experiencebx1_6" /></td>
    <td><input type="radio" name="experiencebx1" value="7" id="experiencebx1_7" /></td>
    <td><input type="radio" name="experiencebx1" value="8" id="experiencebx1_8" /></td>
    <td><input type="radio" name="experiencebx1" value="9" id="experiencebx1_9" /></td>
    <td><input type="radio" name="experiencebx1" value="10" id="experiencebx1_10" /></td>
  </tr>
  <tr>
    <td>Comments: </td>
    <td><textarea required name="Comments"></textarea> </td>
  </tr>
</table>

Answer 1

当然，您需要将文本区域的宽度设置为100％并使表格单元格与 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.0.BUILD-SNAPSHOT</version> </parent> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>2.0.0.M7</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-amqp</artifactId> <version>2.0.0.M7</version> </dependency> <dependency> <groupId>io.projectreactor</groupId> <artifactId>reactor-core</artifactId> <version>3.1.3.RELEASE</version> </dependency> <dependency> <groupId>io.projectreactor</groupId> <artifactId>reactor-net</artifactId> <version>2.0.8.RELEASE</version> </dependency> <dependency> <groupId>io.projectreactor.ipc</groupId> <artifactId>reactor-netty</artifactId> <version>0.7.3.RELEASE</version> </dependency> <dependency> <groupId>io.netty</groupId> <artifactId>netty-all</artifactId> <version>4.1.21.Final</version> </dependency> 的其他列对齐：

<td colspan="10">

textarea {
  width: 100%;
}

Answer 2

尝试更新HTML以添加colspan

＆＃13;

＆＃13;

<table>
  <tr>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Criteria 1</td>
    <td><input type="radio" name="experiencebx1" required value="1" id="experiencebx1_1" /></td>
    <td><input type="radio" name="experiencebx1" value="2" id="experiencebx1_2" /></td>
    <td><input type="radio" name="experiencebx1" value="3" id="experiencebx1_3" /></td>
    <td><input type="radio" name="experiencebx1" value="4" id="experiencebx1_4" /></td>
    <td><input type="radio" name="experiencebx1" value="5" id="experiencebx1_5" /></td>
    <td><input type="radio" name="experiencebx1" value="6" id="experiencebx1_6" /></td>
    <td><input type="radio" name="experiencebx1" value="7" id="experiencebx1_7" /></td>
    <td><input type="radio" name="experiencebx1" value="8" id="experiencebx1_8" /></td>
    <td><input type="radio" name="experiencebx1" value="9" id="experiencebx1_9" /></td>
    <td><input type="radio" name="experiencebx1" value="10" id="experiencebx1_10" /></td>
  </tr>
  <tr>
    <td>Comments: </td>
    <td colspan="10">
      <textarea required name="Comments"></textarea>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

您还需要更新CSS以使其100％宽度：

td textarea {
  width: 100%;
}