lenno lenno - 23 days ago 12
CSS Question

HTML, CSS, JS - Align textareas with labels in table display

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?

Answer

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>

Comments