title: html table fit column width to content
body: <p>I would like my table column width fit to its content. Right now I got a super wide column[0], and the rest columns have fit width.</p>
  
  <p>Why is this happening and how do I get the output I need?</p>
  
  <p>Thanks.</p>
  
  <p><a href="https://i.stack.imgur.com/5vOF4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5vOF4.png" alt="enter image description here"></a></p>
  
  <pre><code>@extends('app')
  
  @section('content')
  
  &lt;style&gt;
      /*table {*/
          /*table-layout: auto;*/
          /*border-collapse: collapse;*/
          /*width: 100%;*/
      /*}*/
      /*table td {*/
          /*border: 1px solid #ccc;*/
      /*}*/
      table td.absorbing-column {
          width: 100%;
      }
  &lt;/style&gt;
  
  
  &lt;h1&gt;Query Results&lt;/h1&gt;
  &lt;?PHP
      $keys = array_keys(get_object_vars($results[0]));
      echo "&lt;table class=\"table table-bordered table-condensed\"&gt;&lt;tr&gt;&lt;th&gt;".implode("&lt;/th&gt;&lt;th&gt;", $keys)."&lt;/th&gt;&lt;/tr&gt;";
  ?&gt;
      @foreach ($results as $result)
          &lt;tr&gt;
              @foreach ($keys as $key)
                  &lt;td class="absorbing-column"&gt;
                      {{$result-&gt;$key}}
                  &lt;/td&gt;
              @endforeach
          &lt;/tr&gt;
      @endforeach
  &lt;/table&gt;
  @endsection
  </code></pre>