title: Bootstrap Table columns not aligning properly
body: <p>I have a table that appears to not like to be formatted properly. I've tried adjusting the colspans but nothing has worked. There's an extra column header on the right that should say "Operations" but it goes outside the div (or something) and I can't even scroll to it and none of the rows match their headers. Where did I go wrong?</p>
  
  <p><a href="https://i.stack.imgur.com/Fla3v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fla3v.png" alt="enter image description here"></a></p>
  
  <p>javascript</p>
  
  <pre><code>&lt;script&gt;
    var $table = $('#table')
    var $remove = $('#remove')
    var selections = []
      document.getElementById("Add").onclick = function () {
          location.href = "new.php";
      };
  
    function getIdSelections() {
      return $.map($table.bootstrapTable('getSelections'), function (row) {
        return row.id
      })
    }
  
    function responseHandler(res) {
  
  
      $.each (res.rows, function (i, row) {
        row.state = $.inArray(row.id, selections) !== -1
      })
      return res
    }
  
    function detailFormatter(index, row) {
      var html = []
      $.each(row, function (key, value) {
        html.push('&lt;p&gt;&lt;b&gt;' + key + ':&lt;/b&gt; ' + value + '&lt;/p&gt;')
      })
      return html.join('')
    }
  
  function operateFormatter(value, row, index) { 
  return [
   '&lt;a class="remove" onclick="return confirm(\'Are you sure you want to delete this vendor?\')" href="deleteVendor.php?vendor_id=' + row.id + '" title="Remove"&gt;', 
  '&lt;i class="fa fa-trash"&gt;&lt;/i&gt;', 
  '&lt;/a&gt;', '&lt;a class="view" href="viewVendor.php?vendor_id=' + row.id + '" title="View"&gt;',
   '&lt;i class="fa fa-eye"&gt;&lt;/i&gt;', '&lt;/a&gt;' ].join(''); }
  
    window.operateEvents = {
      'click .view': function (e, value, row, index) {
        sessionStorage.setItem("id", row);
  
      },
  
    }
  
    function totalTextFormatter(data) {
      return 'Total'
    }
  
    function totalNameFormatter(data) {
      return data.length
    }
  
    function totalPriceFormatter(data) {
      var field = this.field
      return '$' + data.map(function (row) {
        return +row[field].substring(1)
      }).reduce(function (sum, i) {
        return sum + i
      }, 0)
    }
  
    function initTable() {
      $table.bootstrapTable('destroy').bootstrapTable({
  
        height: 700,
        locale: $('#locale').val(),
        columns: [
          [{
            field: 'state',
            checkbox: true,
            rowspan: 2,
            align: 'center',
            valign: 'middle'
          },  {
            title: 'Vendor',
            colspan: 1,
            align: 'center'
          },  {
            title: 'Vendor Details',
            colspan: 8,
            align: 'center'
          }],
          [{
            field: 'name',
            title: 'Vendor',
            sortable: true,
            footerFormatter: totalNameFormatter,
            align: 'center',
  
          },{
            field: 'account_company',
            title: 'Account Company',
            sortable: true,
            footerFormatter: totalNameFormatter,
            align: 'center',
  
          }, {
            field: 'id',
            title: 'Vendor ID',
            sortable: true,
            footerFormatter: totalNameFormatter,
            align: 'center',
  
          },  {
            field: 'residual',
            title: 'Residual Risk',
            sortable: true,
            footerFormatter: totalNameFormatter,
            align: 'center',
  
          }, 
          {
            field: 'company',
            title: 'Company',
            sortable: true,
            align: 'center',
            footerFormatter: totalPriceFormatter
          },      {
            field: 'type',
            title: 'Type',
            sortable: true,
            align: 'center',
            footerFormatter: totalPriceFormatter
          },{
            field: 'status',
            title: 'Status',
            sortable: true,
            align: 'center',
            footerFormatter: totalPriceFormatter
          },
          {
            field: 'owner',
            title: 'Owner',
            sortable: true,
            align: 'center',
            footerFormatter: totalPriceFormatter
          }, 
          {
            field: 'operate',
            title: 'Operations',
            align: 'center',
            clickToSelect: false,
            events: window.operateEvents,
            formatter: operateFormatter
          },
  
  
  
          ]
        ]
      })
      $table.on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table',
      function () {
        $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
  
        // save your data, here just save the current page
        selections = getIdSelections()
        // push or splice the selections if you want to save all data selections
      })
      $table.on('all.bs.table', function (e, name, args) {
        console.log(name, args)
      })
      $remove.click(function () {
        var ids = getIdSelections()
        $table.bootstrapTable('remove', {
          field: 'id',
          values: ids
        })
        $remove.prop('disabled', true)
      })
    }
  
    $(function() {
      initTable()
  
      $('#locale').change(initTable)
    })
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML format for table insertion</p>
  
  <pre><code>&lt;table
    id="table"
    data-toolbar="#toolbar"
    data-search="true"
    data-show-refresh="true"
    data-show-toggle="true"
    data-show-fullscreen="true"
    data-show-columns="true"
    data-show-columns-toggle-all="true"
    data-detail-view="true"
    data-show-export="true"
    data-click-to-select="true"
    data-detail-formatter="detailFormatter"
    data-minimum-count-columns="2"
    data-show-pagination-switch="true"
    data-pagination="true"
    data-id-field="id"
    data-page-list="[10, 25, 50, 100, all]"
    data-side-pagination="client"
     data-url="ajax.php" 
    data-response-handler="responseHandler" &gt;
      &lt;thead&gt;
          &lt;tr&gt;
          &lt;tr&gt;                                                                        
              &lt;th data-field="name"&gt;Vendor&lt;/th&gt;
              &lt;th data-field="account_company"&gt;Account Company&lt;/th&gt;
              &lt;th data-field="id"&gt;Vendor ID&lt;/th&gt;
              &lt;th data-field="residual"&gt;Residual Risk&lt;/th&gt;
              &lt;th data-field="company"&gt;Company&lt;/th&gt;
              &lt;th data-field="type"&gt;Type&lt;/th&gt;
              &lt;th data-field="status"&gt;Status&lt;/th&gt;
              &lt;th data-field="owner"&gt;Owner&lt;/th&gt;
          &lt;/tr&gt;                       
          &lt;/tr&gt;
          &lt;/thead&gt;
  &lt;/table&gt;                           
  </code></pre>
  
  <p>EDIT: When I zoom all the way out on the page, I can fully see the table and they appear to line up fairly decently. 
  <a href="https://i.stack.imgur.com/8GBZ7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8GBZ7.png" alt="enter image description here"></a></p>