CODEWITHSUNDEEP
html
SMH
SMH

Reputation: 1316

Expand a textarea across table HTML

I am trying to add a text area within a table but it only fits in one column but I want to expand to cover the whole width of all columns. Currently is shown as: enter image description here

My Code:

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

Upvotes: 0

Views: 76

Answers (2)

tracyak13
tracyak13

Reputation: 312

Try updating your HTML to add a 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>

You'll also need to update your CSS to make it 100% width:

td textarea {
  width: 100%;
}

Upvotes: 0

j08691
j08691

Reputation: 207901

Sure, you need to set the width on the text area to 100% and make the table cell it's in span the other columns with <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>

Upvotes: 1

Related Questions