title: Is it possible to make html table column text cropped with three dots by CSS only when there is overflow in the table?
body: <p>I have a basic HTML table with 4 columns and 4 rows.Basically width:0 given to first three columns to make them as wide as length of the text inside the column and the last one is free to fill the available space like below (Sorry for bad drawing)</p>
  <p><a href="https://i.stack.imgur.com/RYZuj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RYZuj.png" alt="enter image description here" /></a></p>
  <p>When text gets longer and page resized like below , overflow occurs and scrolling appears on x-axis.</p>
  <p><a href="https://i.stack.imgur.com/hjD0A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hjD0A.png" alt="enter image description here" /></a></p>
  <p>What I want in this case is cropping the text with three dots when there's overflow(in another saying when there is no enough space for the last column to fill the space).So no need to scroll in x-axis.See the image below to get my expectation.</p>
  <p><a href="https://i.stack.imgur.com/rkTwG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rkTwG.png" alt="enter image description here" /></a></p>
  <p>You can see that there's no overflow occured and text is cropped with three dots.For demonstration of my expectation, I just set max-width:549px as a default but somehow I should make this dynamically and make it work as expected for all screen width sizes.Is it possible to do with CSS?</p>
  <p>Here you can find the code snippet</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-responsive {
      display: block;
      width: 100%;
      overflow-x: auto;
  }
  .table-thin table {
      border-spacing: 0;
      margin-bottom: 0px;
  }
  .table-thin table tbody tr td {
      padding-top: 0;
      font-size: 12px;
      height: 30px;
  }
  .table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 1px;
  }
  .table-thin table td, .table-thin table th {
      text-overflow: ellipsis;
      border:1px solid;
      white-space: pre;
      overflow-x: hidden;
  }
  .table-thin table td:not(:last-child), .table-thin table th:not(:last-child) {
      width: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table-responsive table-thin"&gt;
      &lt;table class="table table--h30"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;strong&gt;September&lt;/strong&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;strong&gt;October&lt;/strong&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;strong&gt;November&lt;/strong&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;strong&gt;First row&lt;/strong&gt;&lt;/td&gt;
                  &lt;td&gt;2&lt;/td&gt;
                  &lt;td&gt;4&lt;/td&gt;
                  &lt;td&gt;4&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;strong&gt;Second row&lt;/strong&gt;&lt;/td&gt;
                  &lt;td&gt;0&lt;/td&gt;
                  &lt;td&gt;0&lt;/td&gt;
                  &lt;td&gt;2&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;strong&gt;Third row&lt;/strong&gt;&lt;/td&gt;
                  &lt;td&gt;2&lt;/td&gt;
                  &lt;td&gt;6&lt;/td&gt;
                  &lt;td&gt;5&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;strong&gt;Fourth row&lt;/strong&gt;&lt;/td&gt;
                  &lt;td&gt;104&lt;/td&gt;
                  &lt;td&gt;102&lt;/td&gt;
                  &lt;td&gt;103&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>