0

I am using the following css to align labels and textareas 

div     { display: table;      }
p       { display: table-row;  }
label   { display: table-cell; text-align: center;}
textarea{ display: table-cell; margin-left: 10px}

, adapted from the answer of Clément from this question How to align input forms in HTML. I am using the first paragraph as a header that only contains labels. The following paragraphs contain textareas.

<div>
  <H4> h1 </H4>
  <p>
    <label>id</label>
    <label>name</label>
    <label>input1</label>
    <label>input2</label>
    <label>input3</label>
    <label>input4</label>
  </p>
  <p>
    <label>123213</label>
    <label>test1</label>
    <textarea title="1" style="border:1px solid black;"></textarea>
    <textarea title="2" style="border:1px solid black;"></textarea>
    <textarea title="3" style="border:1px solid black;"></textarea>
    <textarea title="4" style="border:1px solid black;"></textarea>
  </p>
  <p>
    <label>456</label>
    <label>test2</label>
    <textarea title="5" style="border:1px solid black;"></textarea>
    <textarea title="6" style="border:1px solid black;"></textarea>
    <textarea title="7" style="border:1px solid black;"></textarea>
    <textarea title="8" style="border:1px solid black;"></textarea>
  </p>
</div>

The first and second columns and their labels are displayed correctly. Just as the textareas. The third to sixth label of the first row however aren't displayed as intended. The table-cell of the third label seems to span over all (instead of one) table-cells of the textareas. The fourth to sixth label seems to be displayed in additional table-cells outside of the intended table width.

Here's a JSFiddle: https://jsfiddle.net/3rrabvu6/1/

I want each textarea to be displayed beneath one label of the first paragraph. How can I achieve this?

Community
  • 1
  • 1
lenno
  • 15
  • 4

3 Answers3

0

I have made some changes -

table { border:1px solid black; border-collapse: collapse; }
td, th { border:1px solid black;text-align: center; }
label { display: table-cell; text-align: center; }
textarea { display: table-cell; margin-left: 10px;border:1px solid black; }
<table>
  
  <tr>
    <th> <label>id</label></th>
    <th><label>name</label></th>
    <th><label>input1</label></th>
    <th><label>input2</label></th>
    <th> <label>input3</label></th>
    <th> <label>input4</label></th>
  </tr>
  
  <tr>
    <td><label>123213</label></td>
    <td> <label>test1</label></td>
    <td><textarea title="1"></textarea></td>
    <td> <textarea title="2"></textarea></td>
    <td> <textarea title="3"></textarea></td>
    <td> <textarea title="4"></textarea></td>
  </tr>

  <tr>
    <td><label>456</label></td>
    <td><label>test2</label></td>
    <td><textarea title="5"></textarea></td>
    <td> <textarea title="6"></textarea></td>
    <td><textarea title="7"></textarea></td>
    <td> <textarea title="8"></textarea></td>
  </tr>
  
</table>
Daniel J Abraham
  • 234
  • 2
  • 12
  • Do you have an idea what I missed out on my attempt? I tried your solution with `` instead of `` and it worked as well but I have no clue why my attempt is not working. – lenno Nov 10 '16 at 11:48
  • Due to the fact that your solution worked, i'll mark your answer as useful, as soon as I reached the needed rep. I did not mark your answer as accepted though because I found the answer of Mr. A more **for me** because of fewer changes to my code (incl. js). – lenno Nov 10 '16 at 12:05
0

Try this

div     { display: table;      }
p       { display: table-row;  }
label   { display: table-cell; text-align: center;}
textarea{  margin-left: 10px}
<div>
  <H4> h1 </H4>
  <p>
    <label>id</label>
    <label>name</label>
    <label>input1</label>
    <label>input2</label>
    <label>input3</label>
    <label>input4</label>
  </p>
  <p>
    <label>123213</label>
    <label>test1</label>
    <label><textarea title="1" style="border:1px solid black;"></textarea></label>
    <label><textarea title="2" style="border:1px solid black;"></textarea></label>
    <label><textarea title="3" style="border:1px solid black;"></textarea></label>
    <label><textarea title="4" style="border:1px solid black;"></textarea></label>
  </p>
  <p>
    <label>456</label>
    <label>test2</label>
    <label><textarea title="5" style="border:1px solid black;"></textarea></label>
    <label><textarea title="6" style="border:1px solid black;"></textarea></label>
    <label><textarea title="7" style="border:1px solid black;"></textarea></label>
    <label><textarea title="8" style="border:1px solid black;"></textarea></label>
  </p>
</div>
Mr. A
  • 1,221
  • 18
  • 28
  • This is the the layout I was looking for. It is so far the solution that matches my previous attempt the best (minimal changes to the code incl. the already written js to get text from textareas). – lenno Nov 10 '16 at 12:00
0

Try this one: or please leave a comment if you have any concern. and also dont forget to vote up or mark the check if you got the answer. Thats all dude! SNIPPET

<style>
      .container ul li{
      list-style: none;
    }
    
    .container{
      font-family: arial;  
    }
    
    .container ul li textarea{
      margin-bottom: 40px;
      border-radius: 5px;
      border: solid 1px #ccc;
      padding: 10px;
    }
    
    </style>
    <div class="container">
        <ul>
          <li>
            <label for="">Name</label><br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
          </li>
          <li>
            <label for="">Age</label><br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
          </li>
          <li>
            <label for="">Address</label><br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
          </li>
          <li>
            <label for="">Birthday</label><br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
          </li>
        </ul>
    </div>