div table cell width totally ignored - html

Question

As per title, cell width is totally ignored - tried so many things and none work. Tried inspecting to see if there is any inheritance that i do not know about but nothing showed up. The cells just split into equal chunks and cell width property is ignored.
.CalculateBtn {
background-color: #96c11f;
width: 200px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Raleway, Arial;
font-size: 21px;
font-weight: normal;
padding: 10px 10px;
text-decoration: none;
text-align: center;
}
.CalculateBtn:hover {
background-color: #7f0050;
color: #ffffff;
}
.divTable {
display: table;
width: 100%;
table-layout: fixed;
/*vertical-align: top;*/
}
.divTableRow {
display: table-row;
background-color: #0d56c2;
}
.divTableButtonRow {
display: table-row;
}
.divTableHead-left {
background-color: #7F0050;
display: table-cell;
padding: 3px 10px;
width: 30%;
}
.divTableHead-center {
color: #ffffff;
text-align: center;
font-family: raleway, arial, helvetica, sans-serif;
background-color: #7F0050;
display: table-cell;
padding: 3px 10px;
width: 40%;
}
.divTableHead-right {
background-color: #7F0050;
display: table-cell;
padding: 3px 10px;
width: 30%;
}
/* Table Cells */
.divTableCell-left,
.divTableHead {
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
display: table-cell;
padding: 3px 10px;
width: 20%;
}
.divTableCell-center,
.divTableHead {
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
display: table-cell;
padding: 3px 10px;
width: 30%;
color: #ffffff;
}
.divTableCell-right,
.divTableHead {
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
display: table-cell;
padding: 3px 10px;
width: 50%;
color: #ffffff;
}
/* Button Cell properties */
.divTableCellButton-left,
.divTableHead {
display: table-cell;
padding: 3px 10px;
width: 30%;
}
.divTableCellButton-center,
.divTableHead {
display: table-cell;
padding: 3px 10px;
width: 40%;
}
.divTableCellButton-right,
.divTableHead {
display: table-cell;
padding: 3px 10px;
width: 30%;
}
/* End Button Cell properties */
/* INFO cell properties*/
.divTableCellInfo-left {
color: #ffffff;
display: table-cell;
padding: 3px 10px;
max-width: 20%;
}
.divTableCellInfo-right {
color: #ffffff;
display: table-cell;
padding: 3px 10px;
max-width: 80%;
}
/* End info cell properties*/
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable" style="border: 1px solid #ffffff;">
<div class="divTableBody">
<div class="divTableHead-left"> </div>
<div class="divTableHead-center">
<font size="4">Staffing Calculator K=2</font>
</div>
<div class="divTableHead-right"> </div>
<div class="divTableRow">
<div class="divTableCell-left">
<font color="#ffffff">Calls:</font>
</div>
<div class="divTableCell-center"><input type="text" name="calls" id="calls" style="width: 80px;" value="151"></div>
<div class="divTableCell-right">
<font color="#ffffff">in a period of</font>
<input name="period" value="5" />
<select name="callUnit">
<option value="hour" selected>hours</option>
<option value="minute" >minutes</option>
</select>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell-left">
<font color="#ffffff">Average Handle Time: </font>
</div>
<div class="divTableCell-center"><input type="text" name="aht" value="300"></div>
<div class="divTableCell-right">
<select name="ahtUnit">
<option value="minute" >minutes</option>
<option value="second" selected>seconds</option>
</select> <i>include time spent on phone and time working after call. Usually between 3 and 5 minutes.</i>
</div>
</div>
</div>

Answer 1

I use colgroup for this. I see you are using div's in your markup and table related CSS to style your table, so my suggestion would require that you change your markup to table markup (not sure if doable).
table {
width: 100%;
table-layout: fixed;
}
th {
background: #0095ff;
color: white;
}
td {
border: 1px solid #ccc;
}
<table>
<colgroup>
<col style="width:30%" />
<col style="width:40%" />
<col style="width:30%" />
</colgroup>
<thead>
<tr>
<th colspan="3">This is the table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>