用 CSS 向右移动 table <tfoot>

Question

我有这个 table，我无法编辑它的 <tfoot> HTML 标签，它是用无法更改的 PHP 函数呈现的。所以我无法更改 <tfoot>.

中的 <tr>

如何只用 CSS 将红色区域 (x1, x2) 向右移动？

table {
  width: 100%;
  border-collapse: separate;
}

table td {
  border-top: 1px solid red;
}

thead {
  background: green;
}

tbody {
  background: yellow;
}

tfoot {
  background: red;
}

<table cellspacing="0">

  <thead>
    <tr>
      <th>thead 1</th>
      <th>thead 2</th>
      <th>thead 3</th>
      <th>thead 4</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>tbody 1</td>
      <td>tbody 2</td>
      <th>tbody 3</th>
      <th>tbody 4</th>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>x1</td>
      <td>x2</td>
    </tr>
  </tfoot>

</table>

Answer 1

在不使用 Javascript 的情况下，它是可行的，但不是以干净的方式。（或者我不知道）

我认为你不能只用 CSS 修改 HTML 结构，但你可以这样做：

tfoot {
  position:relative;
  background: red;
  left:20%;
  }

JSFiddle

您可以使用“left”属性的值来获得您需要的值。

table {
    width: 100%;
    border-collapse: separate;
    overflow:hidden;
}
table td {
    border-top: 1px solid red;
}
thead {background: green;}
tbody {background: yellow;}
tfoot {
  position:relative;
  background: red;
  left:25%;
  }

<table cellspacing="0">
    
    <thead>
        <tr>
            <th>thead 1</th>
            <th>thead 2</th>
            <th>thead 3</th>
            <th>thead 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>tbody 1</td>
            <td>tbody 2</td>
            <th>tbody 3</th>
            <th>tbody 4</th>
        </tr>
    </tbody>
    
     <tfoot>
        <tr>
            <td>x1</td>
            <td>x2</td>
        </tr>
    </tfoot>
    
</table>

如果您有可能使用 Javascript，您可以在结构中添加一个“”标签，就在“x1”标签之前。给它一个 class 名称，以便您可以使用 css 自定义它。那会把另外两个适当地推到左边。

Answer 2

正如另一个答案提到的，如果不使用 JavaScript，这似乎很难实现，特别是 tfoot.

中缺少 td 元素

但是，还有一个替代解决方案，使用在 tfoot 上使用 translateX 的转换：

tfoot {
    background: red;
    transform: translateX(50%);
}

这会将整个元素向右移动 50%。

正如@isherwood 在评论中指出的那样，这具有在 table 上创建水平溢出的无益副作用。这可以通过在 table CSS:

上设置 overflow: hidden 来简单纠正

table {
    ...
    overflow: hidden;
}

这是一个工作片段：

table {
    width: 100%;
    border-collapse: separate;
    overflow: hidden;
}
table td {
    border-top: 1px solid red;
}
thead {background: green;}
tbody {background: yellow;}
tfoot {
    background: red;
    transform: translateX(50%);
}

<table cellspacing="0">
    
    <thead>
        <tr>
            <th>thead 1</th>
            <th>thead 2</th>
            <th>thead 3</th>
            <th>thead 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>tbody 1</td>
            <td>tbody 2</td>
            <th>tbody 3</th>
            <th>tbody 4</th>
        </tr>
    </tbody>
    
     <tfoot>
        <tr>
            <td>x1</td>
            <td>x2</td>
        </tr>
    </tfoot>
    
</table>

用 CSS 向右移动 table <tfoot>

Move table <tfoot> to the right with CSS

html

css

css-tables