Table 在 Chrome 中看起来不对，刷新后一切正常

Question

table 我遇到了问题。在 Firefox 上它看起来不错，但是当我第一次在 Chrome 上打开它时 table 处于不同的位置。刷新修复一切。我做错了什么？

CSS

    #spec0{
    background-color: #FFFFFF;
    width: 566px;
    border: 1px solid #ddd;
    }

    #spec1{
    background-color: #F1F1F1;
    width: 566px;
    height: 20px;
    }

    #table {
    border-collapse: collapse;
    width: 566px;
    border: 1px solid #ddd;
    margin-top: 11px;
    position: static;
    }

    #tr{
    border: 1px solid #ddd;
    height: 10px;
    font-size: 11pt;
    text-align: right;
    }


    #tr1{
    border: 1px solid #ddd;
    height: 10px;
    font-size: 11pt;
    }

    #tr3{
    height: 10px;
    font-size: 11pt;
    border: 1px solid #ddd;
    text-align: left;
    }

HTML

<table id="table">
  <tr id="spec">
    <th id="tr">Template</th>
    <th id="tr3">Template</th>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec">
    <td id="tr">Template</td>
    <td id="tr1">Template</td>
  </tr>
  <tr id="spec1">
    <td id="tr"></td>
    <td id="tr1">Template</td>
  </tr>
</table>

image; first launch from Chrome

Answer 1

您正在使用多个相同的 ID，ID 必须是唯一的，因此更改为 class，并且您在只有 id="spec"[=14= 时尝试应用 #spec0 ]

.spec {
  background-color: #FFFFFF;
  width: 566px;
  border: 1px solid #ddd;
}
.spec1 {
  background-color: #F1F1F1;
  width: 566px;
  height: 20px;
}
#table {
  border-collapse: collapse;
  width: 566px;
  border: 1px solid #ddd;
  margin-top: 11px;
  position: static;
}
.tr {
  border: 1px solid #ddd;
  height: 10px;
  font-size: 11pt;
  text-align: right;
}
.tr1 {
  border: 1px solid #ddd;
  height: 10px;
  font-size: 11pt;
}

.tr3 {
  height: 10px;
  font-size: 11pt;
  border: 1px solid #ddd;
  text-align: left;
}

<table id="table">
  <tr class="spec">
    <th class="tr">Template</th>
    <th class="tr3">Template</th>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec">
    <td class="tr">Template</td>
    <td class="tr1">Template</td>
  </tr>
  <tr class="spec1">
    <td class="tr"></td>
    <td class="tr1">Template</td>
  </tr>
</table>

Table 在 Chrome 中看起来不对，刷新后一切正常

Table looks wrong in Chrome, after refreshing everything is ok

html

css

row

html-table

image