如何在所有浏览器中使表格保持一致答案

【问题标题】：How to make table consistent in all browsers如何在所有浏览器中使表格保持一致
【发布时间】：2022-01-02 21:14:09
【问题描述】：

我开始学习 HTML。在我创建的表中，我使用rowspan，但是当我在展开的列中插入图像时，图像似乎没有在整个单元格中展开。所以表格的行开始有不同的高度。这发生在 EDGE 和 IE 中，但不会在 OPERA、Firefox 等中发生，如下图所示。那里的列高也不一致。理想情况下，我希望由其内容标识的单元格具有以下高度（假设行高固定）：

标题 1 和 2：1 列

标题 3 和 4：2 列

左图高度：4 列

右图高度：6列

body{
    background-color:#FFFF99
}
img {
    height: 70px;
    display:block;
}
h1{
    font-style: italic;
    color:#3300CC;

}
table, th, td {
    border: 1px solid black;
    border-spacing:3px;
}
table {
  width: 75%;
}

th {
    padding:4px;
    text-align:right;
}
td{
    padding:4px;
}

.Tablestyle1{
  background-color: #00CC66;
  text-align: center
}

<h1>TITLE </h1>
    <table>
    <tr class="Tablestyle1" >                                       <!--First Row-->
        <td>A</td>
        <td colspan="4">B</td>
    </tr>
    <tr>
        <td class="Tablestyle1"rowspan="2">C</td>
        <th>Header1</th>
        <td> D</td>
        <td rowspan="6"> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt1" > 
        <td rowspan="6">
            <ol type="I">
                <li>List1</li>
                <li>List2</li>
                <li>List3</li>
            </ol>
    </tr>
    <tr>
        <th>Header2</th>
        <td>F</td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt2" >
        </td>
        <th rowspan="2">Header3</th>
        <td rowspan="2">H</td>
    </tr>
    <tr></tr>
    <tr>
        <th rowspan="2">Header4</th>
        <td rowspan="2">L</td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="5">
            <a href="*"> Link1</a>
        </td>
    </tr>   
    </table>

【问题讨论】：

标签： html css html-table

【解决方案1】：

这是一个带有内联 css 的精简示例，用于解释如何设置每个元素的样式。 colspans 和 rowspans 也被简化了。

这是一个固定高度的解决方案。如果您想根据内容调整高度，您可能需要一些 jQuery 魔法。我认为 Flexbox 和表格无法跨浏览器工作。

<table style="border-collapse: collapse; width: 75%; height: 216px;" border="1">
  <tbody>
    <tr style="height: 36px;">
      <td style="width: 30%; height: 36px;">A</td>
      <td style="width: 70%; height: 36px;" colspan="4">B</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 30%; height: 72px;" rowspan="2">C</td>
      <td style="width: 15%; height: 36px;">1</td>
      <td style="width: 10%; height: 36px;">D</td>
      <td style="width: 20%; height: 144px;" rowspan="4">Image</td>
      <td style="width: 25%; height: 144px;" rowspan="4">List</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 15%; height: 36px;">2</td>
      <td style="width: 10%; height: 36px;">F</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 30%; height: 72px;" rowspan="2">Image</td>
      <td style="width: 15%; height: 36px;">3</td>
      <td style="width: 10%; height: 36px;">H</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 15%; height: 36px;">4</td>
      <td style="width: 10%; height: 36px;">L</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 100%; height: 36px;" colspan="5">Link</td>
    </tr>
  </tbody>
</table>

如果内容太大，表格仍然可能被扭曲——除非你使用溢出：隐藏https://stackoverflow.com/a/509825/762640

【讨论】：

【解决方案2】：

对于高度，您可以将高度设置为所有td的

另一个选项（也适用于宽度），您可以为所需的每个单元格设置类，并为其定义 css 规则。

您可以在此处查看示例。

https://jsfiddle.net/5upeywrd/2/

我为标题单元格“A”做了规则。

【讨论】：