移动表格中的元素

Question

假设我有一个html表

|td,td,td|
|td|

如果我想将底行上的td移动到行的右侧。我该怎么办？我也不能使用3的colspan。我需要移动整个单元格。

最终结果

|td,td,td|
|      td|

Answer 1

创建占位符：

<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td>...</td>
</tr>

或者使用colspan：

<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
<tr>
  <td colspan="3">...</td>
</tr>

或两者：

<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
<tr>
  <td colspan="2"></td>
  <td>...</td>
</tr>

Answer 2

<table border="1" style="height:300px; width:300px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>4</td>
  </tr>
</table>

Answer 3

使用colspan并放置空单元格，直到到达列偏移量并使用CSS将它们隐藏起来。简单！

在你的CSS中：

td.hidden-cell
{
  visibility: hidden;
}

在您的表格中（例如，在包含6列的表格中，其中4应隐藏在最后一行中，其中一列用于总计

<tr colspan="5" class="col-lg-offset-2">
      <td class="hidden-cell"></td>
      <td class="hidden-cell"></td>
      <td class="hidden-cell"></td>
      <td class="hidden-cell"></td>
      <td><strong>Total:</strong></td>
      <td></td>
</tr>

允许你得到这样的东西：

Answer 4

因此，使用Malks回答在没有colspans的情况下移动单元格的唯一方法是添加占位符单元格。我不想添加一堆单元格，所以我循环了它们。我使用ruby所以我做了类似的事情

<% 9.times do %>
  <td></td>
<% end %>

<td>My cell has been pushed over 9 cells</td>