multiselect width problem when using tables

multiselect width problem when using tables

HTML

<script src="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.multiselect/1.13/jquery.multiselect.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.multiselect/1.13/jquery.multiselect.filter.css">
<div>

</div>
  <h3>
  Table WITH multiselect
  </h3>
  
      <tr>
        
        <td class="test">
          <select name="test" class="use-widget" multiple>
            <option value="foo">foo asd a asdd </option>
            <option value="bar">foo asd a asdasdas </option>
            <option value="baz">foo asd a asd dasd as </option>
          </select>
        </td>
<br>
      </tr>

      <tr>
        
        <td>
          <select name="test" class="use-widget" multiple>
            <option value="foo">foo asd a asdd </option>
            <option value="bar">foo asd a asdasdas </option>
            <option value="baz">foo asd a asd dasd as </option>
          </select>
        </td>
      </tr>
      <tr>
        
        <td>
          <select name="test" class="use-widget" multiple>
            <option value="foo">foo asd a asdd </option>
            <option value="bar">foo asd a asdasdas </option>
            <option value="baz">foo asd a asd dasd as </option>
          </select>
        </td>
      </tr>
      <tr>
       
        <td>
          <select name="test" class="use-widget" multiple>
            <option value="foo">foo asd a asdd </option>
            <option value="bar">foo asd a asdasdas </option>
            <option value="baz">foo asd a asd dasd as </option>
          </select>
        </td>
      </tr>
    
  </div>
</div>

TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TEST
TESTTESTTESTTEST

TEST
TEST
TEST
The English Wikipedia reached 4,000,000 registered user accounts on 1 April 2007,[15] just a little over a year since it had crossed a...

CSS

table {
  border: 1px solid black;
  width: 100%;
}

table th,td {
  border: 1px solid black;
}

select {
  width: 100%;
}

JavaScript

/* jshint forin:true, noarg:true, noempty:true, eqeqeq:true, boss:true, undef:true, curly:true, browser:true, jquery:true */
/*
 * jQuery MultiSelect UI Widget 1.14pre
 * Copyright (c) 2012 Eric Hynds
 *
 * http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
 *
 * Depends:
 *   - jQuery 1.4.2+
 *   - jQuery UI 1.8 widget factory
 *
 * Optional:
 *   - jQuery UI effects
 *   - jQuery UI position utility
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 */
(function($, undefined) {

  var multiselectID = 0;
  var $doc = $(document);

  $.widget("ech.multiselect", {

    // default options
    options: {
      header: true,
      height: 175,
      minWidth: 225,
      classes: '',
      checkAllText: 'Check all',
      uncheckAllText: 'Uncheck all',
      noneSelectedText: 'Select options',
      selectedText: '# selected',
      selectedList: 0,
      show: null,
      hide: null,
      autoOpen: false,
      multiple: true,
      position: {},
      appendTo: "body",
      menuWidth:null
    },

    _create: function() {
      var el = this.element;
      var o = this.options;

      this.speed = $.fx.speeds._default; // default speed for effects
      this._isOpen = false; // assume no

      // create a unique namespace for events that the widget
      // factory cannot unbind automatically. Use eventNamespace if on
      // jQuery UI 1.9+, and otherwise fallback to a custom string.
      this._namespaceID = this.eventNamespace || ('multiselect' + multiselectID);

      var button = (this.button = $('<button type="button"><span class="ui-icon ui-icon-triangle-1-s"></span></button>'))
        .addClass('ui-multiselect ui-widget ui-state-default ui-corner-all')
        .addClass(o.classes)
        .attr({ 'title':el.attr('title'), 'tabIndex':el.attr('tabIndex'), 'id': el.attr('id') + '_ms' })
        .prop('aria-haspopup', true)
       ...