Question

我正在尝试获取某种表格布局：

handleHover(e) => {
    const images = [...this.state.images]; //copy your array
    const index = images.findIndex(el => (el.id === e.target.id));
    images[index].isHovered = !images[index].isHovered;
    this.setState({images});
}

如第一张表所示，但只想显示该行，而不显示表头。隐藏后，布局（colspan = 2）就会“丢失”：

---------
| |   | |
---------

示例代码：

----------
|  |  |  |
----------

https://jsfiddle.net/8v6enhq2/

Answer 1

colspan不会丢失。浏览器正在获取可见的单元格并确定使它们宽的宽度，因为未指定宽度。（基本上，最好是根据每一列中的最长值来分配宽度-尽管每种浏览器的实现方式略有不同）

如果您希望每个单元占用25％的宽度，请在cols部分中指定它。

<table border="1" style="width:100%;">
  <cols>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
  </cols>
  <thead style="display:none">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td>A</td>
    <td colspan="2">B</td>
    <td>C</td>
  </tbody>
</table>

Answer 2

这是我的解决方法。

<table border="1" style="width:100%;">
  <cols>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
  </cols>
  <thead style="display:fixed">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td  style="width:25%">A</td>
    <td colspan="2">B</td>
    <td  style="width:25%">C</td>
  </tbody>
</table>

<table border="1" style="width:100%;">
  <cols>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
  </cols>
  <thead style="display:none">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td  style="width:25%">A</td>
    <td colspan="2">B</td>
    <td  style="width:25%">C</td>
  </tbody>
</table>

Answer 3

由于我认为最合适的答案是用户LGSon在评论我的最初问题时给出的，因此我在此处添加它作为答案：

这是一种方法：jsfiddle.net/8v6enhq2/16 –两天前的LGSon

...这里还有另一个：jsfiddle.net/8v6enhq2/17 ...这是最好的，尽管有一些跨浏览器支持问题会导致崩溃-LGSon 2天前

在单行上使用colspan

3 个答案: