How to set div cell to act like th? - css

Question

Hello everyone I have form which contains few different group of fields. In order to keep them together I used div elements and make them act like table elements. I used this method to avoid table elements inside of the form. In other hand some people said this approach is the same basically since I made div's to act like a table. To be honest I'm not sure if this is the best option. Here is example of my code.
form {
width: 820px;
}
form.frmLayout fieldset {
border: #ccc 2px solid;
margin: 10px;
border-radius:3px;
}
form.frmLayout legend {
font-weight: bold;
background-color: #c8e2db;
border-radius:3px;
padding: 3px;
border: #ccc 2px solid;
}
form.frmLayout label {
float: left;
font-weight: bold;
display: block;
}
form.frmLayout input[type=text] {
text-align: left;
background-color: #c8e2db;
}
div.formItem {
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-repeat: repeat-x;
clear: both;
border-bottom: #ccc 2px dashed;
}
div.formItem:last-child{
border-bottom: none;
}
div.formTbl {
display: table;
width: 100%;
}
div.frRow {
display: table-row;
text-align: left;
}
div.frCell {
display: table-cell;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
}
div.frCell span {
font-weight: bold;
}
<form name="myForm" id="myForm" method="POST" action="#" class="frmLayout">
<input type="hidden" name="frmhs_id" id="frmhs_id" value="" />
<fieldset>
<legend>My Form</legend>
<div class="formItem">
<div class="formTbl">
<div class="frRow">
<div class="frCell" style="width:60%;">
</div>
<div class="frCell" style="width:40%;">
<div class="formTbl">
<div class="frRow">
<div class="frCell" style="width:40%;">
<span>Acoustic Reflex Thresholds</span>
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<span>500</span>
</div>
<div class="frCell" style="width:10%;">
<span>1000</span>
</div>
<div class="frCell" style="width:10%;">
<span>2000</span>
</div>
<div class="frCell" style="width:10%;">
<span>4000</span>
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td6" id="frmhs_td6" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td7" id="frmhs_td7" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td8" id="frmhs_td8" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td9" id="frmhs_td9" value="" size="4" maxlength="4" />
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td15" id="frmhs_td15" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td16" id="frmhs_td16" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td17" id="frmhs_td17" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td18" id="frmhs_td18" value="" size="4" maxlength="4" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="formItem">
<div style="float:left;">
<span><input type="submit" name="frmSubmit" id="frmhdSubmit" value="Submit"></span>
</div>
<div style="float:right;">
<span id="MsgFrm"></span>
</div>
</div>
</fieldset>
</form>
As you can see in my example above title Acoustic Reflex Thresholds is not on the center. Also I think that affects first set of div cells to change the width. I'm wondering how I can make title to go over entire length of div cell? If anyone knows how this can be fixed or is there better way to do this please let me know. Thanks in advance.

Answer 1

One of the limitations of css table layout is that you cannot simulate colspan, so the cells are going to be sized the same as the rest in its "column" even if its only 1 column in the row (as you can see with your "Acoustic Reflex Thresholds" heading).
What you can do is make the heading a table-caption instead of a row and that works, as you can see if you run the updated code snippet below.
There are 2 changes required:
CSS: Add the new class for the table caption
div.frCaption{
display: table-caption;
caption-side: top;
text-align: center;
font-weight: bold;
}
HTML: change the table-row to table-caption
In the row that contains with you "Acoustic Reflex Thresholds" heading:
Change the class from frRow to frCaption
Remove the frCell div altogether
[...right column...]
<div class="frCell" style="width:40%;">
<div class="formTbl">
<div class="frCaption ">
<span>Acoustic Reflex Thresholds</span>
</div>
<div class="frRow">
[... rest of rows...]
form {
width: 820px;
}
form.frmLayout fieldset {
border: #ccc 2px solid;
margin: 10px;
border-radius:3px;
}
form.frmLayout legend {
font-weight: bold;
background-color: #c8e2db;
border-radius:3px;
padding: 3px;
border: #ccc 2px solid;
}
form.frmLayout label {
float: left;
font-weight: bold;
display: block;
}
form.frmLayout input[type=text] {
text-align: left;
background-color: #c8e2db;
}
div.formItem {
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-repeat: repeat-x;
clear: both;
border-bottom: #ccc 2px dashed;
}
div.formItem:last-child{
border-bottom: none;
}
div.formTbl {
display: table;
width: 100%;
}
div.frRow {
display: table-row;
text-align: left;
}
div.frCell {
display: table-cell;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
}
div.frCell span {
font-weight: bold;
}
div.frCaption{
display: table-caption;
caption-side: top;
text-align: center;
font-weight: bold;
}
<form name="myForm" id="myForm" method="POST" action="#" class="frmLayout">
<input type="hidden" name="frmhs_id" id="frmhs_id" value="" />
<fieldset>
<legend>My Form</legend>
<div class="formItem">
<div class="formTbl">
<div class="frRow">
<div class="frCell" style="width:60%;">
</div>
<div class="frCell" style="width:40%;">
<div class="formTbl">
<div class="frCaption ">
<span>Acoustic Reflex Thresholds</span>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<span>500</span>
</div>
<div class="frCell" style="width:10%;">
<span>1000</span>
</div>
<div class="frCell" style="width:10%;">
<span>2000</span>
</div>
<div class="frCell" style="width:10%;">
<span>4000</span>
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td6" id="frmhs_td6" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td7" id="frmhs_td7" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td8" id="frmhs_td8" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td9" id="frmhs_td9" value="" size="4" maxlength="4" />
</div>
</div>
<div class="frRow">
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td15" id="frmhs_td15" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td16" id="frmhs_td16" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td17" id="frmhs_td17" value="" size="4" maxlength="4" />
</div>
<div class="frCell" style="width:10%;">
<input type="text" name="frmhs_td18" id="frmhs_td18" value="" size="4" maxlength="4" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="formItem">
<div style="float:left;">
<span><input type="submit" name="frmSubmit" id="frmhdSubmit" value="Submit"></span>
</div>
<div style="float:right;">
<span id="MsgFrm"></span>
</div>
</div>
</fieldset>
</form>