跨表格 HTML 展开文本区域

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%，并使用 <td colspan="10"> 使其所在的表格单元格跨越其他列：

textarea {
  width: 100%;
}

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

Answer 2

尝试更新您的 HTML 以添加 colspan

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

您还需要更新您的 CSS 以使其宽度为 100%：

td textarea {
  width: 100%;
}