title: CSS Space left and right for border line
body: <p>have added a separator line into my table. 
  Works fine. 
  But now I would like to let the line to 
  leave space on the left and on the right. 
  I have tried border width already,
  but it rather made my border thicker than defining its width...</p>
  
  <p>So how can I get space for the line while the text stays on its place?</p>
  
  <p>my HTML:</p>
  
  <pre><code>&lt;table class="layoutTable"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;table class="philosophyText"&gt;
                  &lt;tr&gt;
                      &lt;th class="header line"&gt;HEADER TEXT&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="text_allground"&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.&lt;/tr&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#section2.section .half:last-child .philosophyText {
      width:100%;
      padding-left:18%;
      padding-right:18%;
  }
  
  #section2.section .half:last-child .philosophyText th {
      font-size: 20px;
      font-size: 2.3vh;
      padding-top:5.0vh;
      padding-bottom:0.5vh;
      font-weight:100;
  }
  
  #section2.section .half:last-child .philosophyText td {
      font-size: 18px;
      font-size: 1.75vh;
      padding-top:2.0vh;
      font-weight:300;
  }
  
  #section2.section .half:last-child .philosophyText .line {
      border-bottom: solid 1px white;
      }
  </code></pre>
  
  <p>My current table looks like that:</p>
  
  <p><a href="https://i.stack.imgur.com/j4FdI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j4FdI.png" alt="enter image description here"></a></p>