title: Break a <tr> using only CSS
body: <p>I am looking for a way to "break" a table row using only CSS.</p>
  
  <p>I want to change this:<br>
  <img src="https://i.stack.imgur.com/llq5D.png" alt="one line"></p>
  
  <p>To this:<br>
  <img src="https://i.stack.imgur.com/FciHX.png" alt="broken line"></p>
  
  <p>I don't have access to the HTML, but can control the CSS.</p>
  
  <p>I have tried</p>
  
  <pre><code>td:nth-child(3) {
      display: block;
  }
  </code></pre>
  
  <p>But it doesn't seem to work.</p>
  
  <p>Here is some simplified code for testing:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  td:nth-child(3) {
      display: block;
      background-color: yellow;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;111111&lt;/td&gt;
          &lt;td&gt;222222&lt;/td&gt;
          &lt;td&gt;333333&lt;/td&gt;
          &lt;td&gt;444444&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>