我在不工作的表中尝试行跨度答案

【问题标题】：i try rowspan in table which is not working我在不工作的表中尝试行跨度
【发布时间】：2022-02-09 21:34:36
【问题描述】：

嘿，我在表格中尝试了行跨度以获得所需的结果，但结果与我想要的不同，我还包括所需的结果 img 和代码.. 请查看代码.. 谢谢

 <table border="1" width="100%" >
        <!--1st row-->
        <tr>
            <td rowspan="2" colspan="2">A</td>
            <td colspan="3" rowspan="1">B</td>
        </tr>
        <!--2nd row-->
        <tr>
            <td colspan="3" rowspan="1">C</td>
        </tr>
        <!--3rd row-->
        <tr>
            <td rowspan="1" colspan="1">D</td>
            <td rowspan="1" colspan="1">E</td>

            <td rowspan="3" colspan="1">F</td>
            <td rowspan="2" colspan="1">G</td>
            <td rowspan="1" colspan="1">H</td>

        </tr>
        <!--4th row-->
        <tr>
            <td rowspan="3" colspan="2">I</td>
            <td rowspan="1" colspan="1">J</td>
            
        </tr>
        <!--5th row-->
        <tr>
            <td rowspan="2">K</td>
            <td rowspan="2">L</td>
        </tr>
        <!--6th row-->
       <tr>
           <td rowspan="1" colspan="1">M</td>
       </tr>
      
    </table>

【问题讨论】：

我很难想象一个用那个表来表达它的数据集是有意义的。我怀疑你最好放弃表格，编写具有更好语义的标记，然后将 CSS Grid 应用于它。

标签： html html-table

【解决方案1】：

我已经为你创建了一个表格，这将按预期工作。

https://codesandbox.io/s/rough-river-19qh2?file=/index.html

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-73oq {
  border-color: #000000;
  text-align: left;
  vertical-align: top;
}

.tg-addcolspan {
  height: 40px;
}

<table class="tg">
  <tbody>
    <tr>
      <td class="tg-73oq" colspan="2" rowspan="2">
        sdfsf<br /><br />SDFSF
      </td>
      <td class="tg-73oq" colspan="3">sdfdsf</td>
    </tr>
    <tr>
      <td class="tg-73oq" colspan="3">sdfdsfs</td>
    </tr>
    <tr>
      <td class="tg-73oq">sdsdff</td>
      <td class="tg-73oq">ssdfsfds</td>
      <td class="tg-73oq" rowspan="3">sdfsfsd</td>
      <td class="tg-73oq" rowspan="2">sdfsfsdfs</td>
      <td class="tg-73oq">sdfdsfsdfs</td>
    </tr>
    <tr>
      <td class="tg-73oq" colspan="2" rowspan="3">sdfsfsdfds</td>
      <td class="tg-73oq">sdfsfs</td>
    </tr>
    <tr class="tg-addcolspan">
      <td class="tg-73oq" rowspan="2">dfdfdf</td>
      <td class="tg-73oq" rowspan="2">dsfsdfsd</td>
    </tr>
    <tr>
      <td class="tg-73oq">sdfsfs</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

在这种特殊情况下（即几乎没有任何内容的单元格），您唯一可以做的事情是：

1.) 向单元格添加更多内容。如果内容量与单元格高度相对应（或变得更高），它们将自动调整。

或

2.) 如果您打算在示例代码中包含尽可能少的内容，请将高度设置添加到应该跨多行的单元格之一 - 请参见下面的 sn-p，其中唯一更改为您的原始code 是为第一列（“I”）的底部单元格添加的height: 4em;。

<table border="1" width="100%" >
        <!--1st row-->
        <tr>
            <td rowspan="2" colspan="2">A</td>
            <td colspan="3" rowspan="1">B</td>
        </tr>
        <!--2nd row-->
        <tr>
            <td colspan="3" rowspan="1">C</td>
        </tr>
        <!--3rd row-->
        <tr>
            <td rowspan="1" colspan="1">D</td>
            <td rowspan="1" colspan="1">E</td>

            <td rowspan="3" colspan="1">F</td>
            <td rowspan="2" colspan="1">G</td>
            <td rowspan="1" colspan="1">H</td>

        </tr>
        <!--4th row-->
        <tr>
            <td rowspan="3" colspan="2" style="height: 4em;">I</td>
            <td rowspan="1" colspan="1">J</td>
            
        </tr>
        <!--5th row-->
        <tr>
            <td rowspan="2">K</td>
            <td rowspan="2">L</td>
        </tr>
        <!--6th row-->
       <tr>
           <td rowspan="1" colspan="1">M</td>
       </tr>
      
    </table>

【讨论】：