Question

根据标题，单元格宽度完全被忽略 - 尝试了很多东西而没有工作。试图检查是否有任何我不知道但仍然没有出现的遗传。单元格只是分成相等的块，单元格宽度属性被忽略。

＆＃13;

.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;
}

＆＃13;

<div class="divTable" style="border: 1px solid #ffffff;">
  <div class="divTableBody">
    <div class="divTableHead-left">&nbsp;</div>
    <div class="divTableHead-center">
      <font size="4">Staffing Calculator K=2</font>
    </div>
    <div class="divTableHead-right">&nbsp;</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>&nbsp;&nbsp;&nbsp;<i>include time spent on phone and time working after call. Usually between 3 and 5 minutes.</i>
      </div>
    </div>
  </div>

＆＃13;

Answer 1

我使用colgroup。我看到你在你的标记和表格相关的CSS中使用div来设置表格的样式，所以我的建议是要求你将标记更改为表格标记（不确定是否可行）。

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>

div表格单元格宽度完全被忽略

1 个答案: