title: How to add left and right padding to a tbody tag to indent the top and bottom border?
body: <p>I have a table, which is composed of tbody tags.  I am using a hide class to toggle the collapse of tbody elements.  I would like to add left and right padding to the tbody, to indent the top and bottom border.  The tbody section is the white section in the screenshot below.  I have tried using border-spacing and tbody:before in my css styles, but it is not working.  Can anyone advise how I can accomplish this?  I have added a <a href="https://codesandbox.io/s/collapsible-div-z8lxly" rel="nofollow noreferrer">codesandbox</a> and code snippet for your review.</p>
  <p><strong>Image:</strong>
  <a href="https://i.stack.imgur.com/JziK6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JziK6.png" alt="enter image description here" /></a></p>
  <p><strong>Code Snippet:</strong></p>
  <pre><code>&lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Regian&lt;/th&gt;
              &lt;th&gt;Q1 2010&lt;/th&gt;
              &lt;th&gt;Q2 2010&lt;/th&gt;
              &lt;th&gt;Q3 2010&lt;/th&gt;
              &lt;th&gt;Q4 2010&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          {/* &lt;tbody&gt; */}
          &lt;tbody className=&quot;labels&quot;&gt;
            &lt;tr&gt;
              &lt;td colSpan=&quot;5&quot;&gt;
                &lt;label htmlFor=&quot;accounting&quot;&gt;Accounting&lt;/label&gt;
                &lt;input
                  type=&quot;checkbox&quot;
                  name=&quot;accounting&quot;
                  id=&quot;accounting&quot;
                  data-toggle=&quot;toggle&quot;
                  onClick={showNestedData}
                &gt;&lt;/input&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;tbody className=&quot;hide&quot; id=&quot;accounting-data&quot;&gt;
            &lt;tr&gt;
              &lt;td className=&quot;border&quot;&gt;Australia&lt;/td&gt;
              &lt;td className=&quot;border&quot;&gt;$7,685.00&lt;/td&gt;
              &lt;td className=&quot;border&quot;&gt;$3,544.00&lt;/td&gt;
              &lt;td className=&quot;border&quot;&gt;$5,834.00&lt;/td&gt;
              &lt;td className=&quot;border&quot;&gt;$10,583.00&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Central America&lt;/td&gt;
              &lt;td&gt;$7,685.00&lt;/td&gt;
              &lt;td&gt;$3,544.00&lt;/td&gt;
              &lt;td&gt;$5,834.00&lt;/td&gt;
              &lt;td&gt;$10,583.00&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>