I want to arrange a specific number of columns on a panel, each with a different width so that they fill the entire panel and create a full row of panels.
Currently, the columns have varying widths but only occupy 70% of the panel's width.
I am not using traditional table tags like <table> or <tr>; instead, I'm using CSS with <div> elements to structure my "table."
The panel consists of a single row with a variable number of columns (4, 5, or 7) depending on where it is implemented.
fiddle: http://jsfiddle.net/Rm5VT/
HTML (excerpt):
<wicket:panel>
<div class="separator">Gen I</div>
<div class="row">
<div class="gen-i">
<div class="column">
<!-- mfr -->
<div class="field">
<span class="field-name">Mfr</span>
<div class="value">
<select name="Mfr" wicket:id="mfr"></select>
</div>
</div>
<!-- s cd -->
<div class="field">
<span class="field-name">S cd</span>
<div class="value">
<input wicket:id="sCd" type="text" />
</div>
</div>
<!-- N pts -->
<div class="field">
<span class="field-name">N Pts</span>
<div class="value">
<input wicket:id="nPts" type="text" />
</div>
</div>
</div>
<div class="column">
<!-- atv-->
<div class="field">
<span class="field-name">Atv</span>
<div class="value">
<span wicket:id="atv"></span>
</div>
</div>
<!-- p sys -->
<div class="field">
<span class="field-name">P Sys</span>
<div class="value">
<span wicket:id="partOfSystem"></span>
</div>
</div>
</div>
<div class="column">
<!-- ty dvc -->
<div class="field">
<span class="field-name">Ty</span>
<div class="value">
<textarea wicket:id="ty"></textarea>
</div>
</div>
<!-- foa -->
<div class="field">
<span class="field-name">FoA</span>
<div class="value">
<select wicket:id="foa"></select>
</div>
</div>
</div>
</div>
</div>
</wicket:panel>
CSS (excerpt):
.separator {
color: #FEFDFD;
background-color: #4984BD;
text-align: center;
font-size: 15px;
font-family: Verdana, sans-serif;
font-weight: bold;
}
.row {
background-color: lightyellow;
display: table;
width: 100%;
}
.column {
float: left;
display: table-column;
}
Thank you for your assistance. I hope my explanation was clear.