jsp 田字格

业务背景

客户体检需要牙齿情况需要田字格展示。

css样式

.divSize{
  width: 17px;
  height: 17px;
  font-size: 3px;
}

.divNormal{
  float: left;
}

.divChangeLine { /* div 换行 */
  float: left;
  clear: left;
}

.yachi_span {
  display: inline-block;
  width: 40px;
  height: 32px;
  margin-left: 5px;
}
.yachi_input{
  width: 19px;
  height: 20px;
  border: 1px solid;
}

html代码

<td colspan="4">
齿列 
1正常 
  <input name="tjDentition" type="checkbox" ${fn:contains(jmExamination.tjDentition,'1')?"checked='checked'":""}   value="1" class="no">
2缺齿

  <input name="tjDentition" type="checkbox" ${fn:contains(jmExamination.tjDentition,'2')?"checked='checked'":""}    value="2" >

  <span class="yachi_span">
    <span  class="divNormal  divSize"><input type="text" class="yachi_input" name="tjQcLeftTop" value="${jmExamination.tjQcLeftTop}" ></span>
    <span  class="divNormal  divSize"><input type="text" class="yachi_input" name="tjQcRightTop" value="${jmExamination.tjQcRightTop}"></span>
    <span  class="divChangeLine  divSize"><input type="text" class="yachi_input" name="tjQcLeftBottom" value="${jmExamination.tjQcLeftBottom}"></span>
    <span  class="divNormal  divSize"><input type="text" class="yachi_input" name="tjQcRightBottom" value="${jmExamination.tjQcRightBottom}"></span>
  </span>
</td>

之前写法

<table  style="display: inline-block;" cellspacing=0 cellpadding=0>
    <tr>
        <td><input type="text" class="yachi_input" name="tjJyLeftTop" value="${jmExamination.tjJyLeftTop}"></td>
        <td><input type="text" class="yachi_input" name="tjJyRightTop" value="${jmExamination.tjJyRightTop}"></td>
    </tr>
    <tr>
        <td><input type="text" class="yachi_input" name="tjJyLeftBottom" value="${jmExamination.tjJyLeftBottom}"></td>
        <td><input type="text" class="yachi_input" name="tjJyRightBottom" value="${jmExamination.tjJyRightBottom}"></td>
    </tr>
    　　</table>

.yachi_input{
    width: 20px;
    border-bottom: none;
    height: 20px;
}
.yachi_table td {
    height: 15px;
}

相比之下，table这种写法，没有span好