Question

我正在尝试创建一个 HTML 表格。我希望每一行和每列都具有相同的宽度和高度。

出于某种原因，在检查单元格时，我注意到高度存在差异。

有谁知道为什么会发生这种情况以及如何解决？注意：应该也适用于 IE11

table{
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  position: absolute;
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  color: gray;
  border: solid 1px;
}

<table>
  <tr>
    <td>
      
    </td>
  </tr>
  <tr>
    <td>
      
    </td>
  </tr>
   <tr>
    <td>
      
    </td>
  </tr>
  <tr>
    <td>
      
    </td>
  </tr>
</table>

Answer 1

table{
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  position: absolute;
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  color: gray;
  border: solid 1px;
}
td div {
  height: 50px;
  overflow-x: hidden;
}

<table>
  <tr>
    <td>
       <div>
          test0
          <br/>
          test0
          <br/>
         
      </div>
    </td>
  </tr>
  <tr>
    <td>
       <div>
          test1
          <br/>
      </div>
    </td>
  </tr>
   <tr>
    <td>
       <div>
          test2
          <br/>
          test2
          <br/>
          test2
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
          test3
          <br/>
          test3
          <br/>
          test3
          <br/>
          test3
          <br/>
      </div>
    </td>
  </tr>
</table>

Answer 2

希望能解决问题

table{
    width: 100%;
    border-collapse:collapse;
}

td{
    width: 50%;
    text-align: left;
    border: 1px solid black;
}

Answer 3

为 td 标签提供了固定高度。希望这能解决您的问题。

td {
     color: gray;
     border: solid 1px;
     height:121px;
   }

HTML 表格呈现不同的行高

3 个答案: