为什么thead 和tfoot 不能实现居中效果？

HTML:

<table>

      <thead>

        <tr>

          <td>

            <img src="img/logo.png" alt="">

          </td>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>

            <table class="body">

              <tr>

                <td width="12%" class="left"></td>

                <td width="88%" class="right">

                  <table class="orders"></table>

                  <table class="search"></table>

                  <table class="list">

                    tr*13>td*8

                  </table>

                </td>

              </tr>

            </table>

          </td>

        </tr>

      </tbody>

      <tfoot>

        <tr>

          <td >

              2019-9-21 ©imooc.com

          </td>

        </tr>

      </tfoot>

</table>

CSS:

thead{

  position: fixed;

  background: rgb(100, 200, 152);

  width: 100%;

  color: white;

  text-align: center;

  top: 0;

}

thead tr td {

  /* position: relative; */

  width: 100%;

  padding: 10px 10px;

  height: 60px;

}

tfoot tr{

position: fixed;

background: rgb(100, 200, 152);

height: 60px;

line-height: 60px;

width: 100%;

color: white;

bottom: 0;

}

tfoot tr td{

  width: 100%;

  margin:0 auto;

}