title: BootStrap Table text ellipsis can not be with responsive web?
body: <p>I am trying to implement String ellipsis in the Table tag.</p>
  
  <p>The source code is below.</p>
  
  <pre><code>&lt;div&gt;
    &lt;div class="widget-body no-padding" style="min-height:0px;"&gt;
      &lt;table class="table" style="table-layout: fixed;"&gt;
        &lt;tbody&gt;
          &lt;c:forEach var="item" items="${result.stuffList}" varStatus="idx"&gt;
            &lt;c:if test="${idx.index &lt; 5}"&gt;
              &lt;tr&gt;
                &lt;td class='text-center' style="width: 80%; text-overflow:ellipsis; -o-text-overow: ellipsis; word-wrap:normal; overflow: hidden;"&gt;
                  &lt;nobr&gt;
                    &lt;a href="#" onclick="javascript:location.href='/view?nid=${item.id}'"&gt;${item.name}&lt;/a&gt;
                  &lt;/nobr&gt;
                &lt;/td&gt;
                &lt;td class='text-center' style="width: 20%;"&gt;
                  ${item.regDate}
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/c:if&gt;
          &lt;/c:forEach&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code works and if String is too long it shows <code>...</code> what I expected.</p>
  
  <p>However, when I test responsive it becomes ugly.</p>
  
  <p>I wrote following part to express item registration date.</p>
  
  <p>But when browser shrinks, its back part does not showed up in screen. </p>
  
  <pre><code>&lt;td class='text-center' style="width: 20%;"&gt;
    ${item.regDate}
  &lt;/td&gt;
  </code></pre>
  
  <p>How can I use ellipsis in Bootstrap in all browser?</p>
  
  <hr>
  
  <p>So it appears like this way</p>
  
  <p>What I expected(when shrink browser) >></p>
  
  <p>column 1 / column 2</p>
  
  <p>AAAA.... / 2014-09-24</p>
  
  <p>What now looks like >></p>
  
  <p>column 1 / column 2</p>
  
  <p>AAAA....  / 2014-09</p>
  
  <p>The problem is >> </p>
  
  <p>Before I add String ellipsis function it works responsive.</p>
  
  <p>My guess >></p>
  
  <p>Maybe <code>table-layout: fixed;</code> style is the cause. but do not know how to implements String ellipsis function without <code>table-layout</code>.</p>
  
  <p>I hope it becomes more clear than I asked first :D</p>
  
  <hr>
  
  <p>I have got the cause</p>
  
  <p>The problem is width : <code>80%</code>, <code>width: 20%</code>, <code>table-layout:fixed</code>.</p>
  
  <p>So when I resize the browser it takes these options for it.</p>
  
  <p>But I still do not know how to replace it.</p>
  
  <p>All of these are in a div which is small part of the web site and I want responsive web. </p>
  
  <hr>
  
  <p>Edited after choose an answer.</p>
  
  <p>Thanks for answering my question!</p>
  
  <p>However I found the cause, but could not fix this.</p>
  
  <p>The chosen answer was not relevant, however it was helpful.</p>
  
  <p>My problem was not by bootstrap, but width.</p>
  
  <p>Even though using responsive web library, </p>
  
  <p>can not be responsive if you use width with <code>%</code> or <code>px</code> properties.</p>