不可能的HTML表要做 [英] Impossible HTML table to do

问题描述

我很容易用HTML编写下表:

I need to do the following table in HTML, too easy:

问题出在第二行，第二列只有一行，没有两行，代码是rowspan = "2".为什么我的代码不起作用，很简单，我真的不理解这个问题……

The problem is in the second row, the second column only has one row, not two, in the code is rowspan = "2". Why doesn't work my code, is simple to do, I don't understand this problem, really…

以下是相关代码:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

推荐答案

我刚刚在此处回答了一个非常类似的问题几天前.显然，如果列的 none 不包含全部预期的行，并且单元格内容允许，浏览器将压缩"到目标行.内容分成更少的行(这是IMO还是一个错误，或者至少是一个错误的解释，但是...).

I just answered a very similar question here a few days ago. Apparently, if none of the columns contains the full amount of intended rows and the cell contents allow it, browsers "compress" the content into less rows (which IMO is a bug or at least, a misinterpretation, but well...).

一旦您在单元格中添加了更多内容(至少在具有作用的单元格中有所不同)，就会呈现所需的布局，其高度取决于单元格内容:

As soon as you add more content into your cells (at least in those that do make a difference), the desired layout is rendered, with height according to the cell contents:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

但是，或者，您可以向一个或某些单元格添加固定高度，以使所需的布局可见，即使它们没有太多内容:

But alternatively, you can add a fixed height to one or some of the cells to make the intended layout visible, even if they don't have as much content:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3" style="height: 80px;">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

这篇关于不可能的HTML表要做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！