CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 557

table column to not push other columns away?

Does anyone know if it is possible for a table column to not push the other columns when I try to increase the width of an input tag? I know that this might be going against the definition of a table but I was wondering if it was possible.

For example enter image description here

I do not want the message input to push the sender's address column away. I tried absolute positioning but then it messes up the rest of the table so I am a bit stuck.

here is my code for reference:

 <table class="main_table" align="center">
      <tr>
        <td>
          <p class="name_font">Sender's name</p>
        </td>
        <td>
          <p class="name_font">Sender's address</p>
        </td>
      <tr>
      <tr>
        <td>
          <input type="text" style="border:1px solid rgb(219, 215, 213); border-radius:4px; padding:10px;">
        </td>
        <td>
          <input type="text" style="border:1px solid rgb(219, 215, 213); border-radius:4px; padding:10px 20px 10px 10px;">
        </td>
      </tr>
      <tr>
        <td>
          <p class="name_font">Message (400 characters max)</p>
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" class="message_box">
        </td>
      </tr>
      <tr class="test_row">
        <td>
          <p class="name_font">Recipient's name</p>
        </td>
        <td>
          <p class="name_font">Recipient's address</p>
        </td>
      </tr>
    </table>

THANK YOU

Upvotes: 0

Views: 869

Answers (1)

lordkain
lordkain

Reputation: 3109

make use of the colspan attribute from td

replace this

<td>
    <p class="name_font">Message (400 characters max)</p >
</td>

to

<td colspan=2>
    <p class="name_font">Message (400 characters max)</p>
</td>

Upvotes: 1

Related Questions