Question

我有一张桌子。该表是由一些服务器端代码生成的，我无法更改，但我可以添加一些CSS到样式。

<table>
<tbody>
<tr>
 <td>row 1 column 1</td>
 <td>row 1 column 2</td>

</tr>
    </tbody>
</table>

有没有办法使用CSS合并两列而不是JQuery

  |row1 column1 |row 1 column 2 |
  |             |               |

获得类似

的输出

| row 1 column2  |
|                |

Answer 1

这在CSS中是不可能的，即使你说他们阻止了级别元素。

它们仍然是两个独立的元素，HTML将这样呈现它们。

如下图所示：

＆＃13;

td {
  border: 1px solid black;
}
.block * {
  display: block;
}
.border-collapse {
  border-collapse: collapse;
  margin: 0;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>row 1 column 1</td>
      <td>row 1 column 2</td>

    </tr>
  </tbody>
</table>

<table class="block">
  <tbody>
    <tr>
      <td>row 1 column 1</td>
      <td>row 1 column 2</td>

    </tr>
  </tbody>
</table>

<table class="border-collapse">
  <tbody>
    <tr>
      <td>row 1 column 1</td>
      <td>row 1 column 2</td>

    </tr>
  </tbody>
</table>

＆＃13;

我相信您将不得不尝试更改html，使用colspan属性：

＆＃13;

<table>
  <tbody>
    <tr>
      <td colspan="3">Here I need a cell by all width</td>
    </tr>
    <tr>
      <td>TD 1</td>
      <td>TD 2</td>
      <td>TD 3</td>
    </tr>
  </tbody>
</table>

＆＃13;

colspan属性定义单元格应跨越的列数。

有一个相关的属性rowspan可以实现对行的相同。

最后一个脏选项是始终将其中一个元素设置为display: none而另一个width: 100%

＆＃13;

table {
  width: 400px;
}
table tr td {
  border: 1px solid black;
}

table.td_hide tr td:first-child {
  display: none;
}

table.td_hide tr td:last-child {
  width: 100%;
}

＆＃13;

<table>
  <tr>
    <td>Row One</td>
    <td>Row Two</td>
  </tr>
</table>

<table class="td_hide">
  <tr>
    <td>Row One</td>
    <td>Row Two</td>
  </tr>
</table>

＆＃13;

Answer 2

尝试将元素显示为块元素，如下所示：

table, tbody, tr, td {
    display: block;
}

使用CSS合并现有列

2 个答案: