title: antd Table Summary
body: <p>I have an <a href="https://ant.design/components/table/" rel="noreferrer">antd table</a> where I want to summarize columns in the footer. However, I'm having issues getting them to line up properly with my columns.  I've tried to use <code>Row</code> / <code>Col</code> to get it to match up but without much luck.  Also it needs to be responsive...</p>
  
  <pre><code> &lt;Table
      columns={columns}
      dataSource={tableData}
      footer={
        &lt;Row&gt;
          &lt;Col span={8}&gt;
            &lt;strong&gt;TOTALS:&lt;/strong&gt;
          &lt;/Col&gt;
          &lt;Col span={2}&gt;
            123
          &lt;/Col&gt;
          &lt;Col span={3} /&gt;
          &lt;Col span={2}&gt;
            123
          &lt;/Col&gt;
          &lt;Col span={2} /&gt;
          &lt;Col span={2}&gt;
            123
          &lt;/Col &gt;
          &lt;Col span={8} /&gt;
        &lt;/Row&gt;
      }
  /&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/CTbVD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CTbVD.png" alt="enter image description here"></a></p>
  
  <p>Is there an better way to achieve this?</p>