CODEWITHSUNDEEP
htmlcsscss-tables
user197192
user197192

Reputation: 25

Move table <tfoot> to the right with CSS

I have this table that I can't edit its <tfoot> HTML tag, it's rendered with a PHP function that can't change. So I can't change the <tr> inside the <tfoot>.

How can I move the red area (x1, x2) to the right with just CSS?

https://jsfiddle.net/qL03728p/

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>

Upvotes: 2

Views: 948

Answers (2)

Shiverz
Shiverz

Reputation: 688

Without using Javascript, it's do-able but not in the clean way. (Or not that I know of)

I don't think you can modify the HTML structure with only CSS but you could do something like this:

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

JSFiddle

You can play with the "left" attribute's value to get it exactly how you would need.

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>

If you had the possibility to use Javascript, you could add a "" tag to the structure, right before the "x1" tag. Give it a class name so that you can customize it with css. That would nudge the other two to the left properly.

Upvotes: 0

Martin
Martin

Reputation: 16433

As another answer mentions, this seems quite difficult to achieve without the use of JavaScript, particularly as the td elements are missing from the tfoot.

However, there is an alternative solution using a transformation that uses translateX on the tfoot:

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

This moves the whole element by 50% to the right.

As pointed out by @isherwood in the comments, this has the unhelpful side-effect of creating a horizontal overflow on the table. This can simple be corrected by setting overflow: hidden on the table CSS:

table {
    ...
    overflow: hidden;
}

Here it is in a working snippet:

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>

Upvotes: 1

Related Questions