How to prevent Bootstrap from making the dragged row change in width?

问题

I would like to have a table which allows me to drag and drop to reorder its rows in it.

Here is the solution offered by Trevor and the original author.

A table and its rows gets changed in width when dragging and dropping to reorder its rows

Here is the jsfiddle demo

http://jsfiddle.net/trevordowdle/2Sg8v/

However, if I add Bootstrap class "table" to the table, the dragged row shrinks. I tried many ways to set the width of the dragged row (the row dynamically created by JQuery UI) and got no success. Here is the jsfiddle demo.

http://jsfiddle.net/mddc/8sRxL/1/

Here is the only change (the table class) after adding Bootstrap css.

<table id="sort" class="grid table" title="Kurt Vonnegut novels">

Any way to fix this?

Though the post's title mentions Bootstrap, it may be just caused by 100% table width. However, I need to have 100% for the table width because of the design that I have no control.

Thanks.

回答1:

Update 2

When setting the widths I find that if you add an extra 16-18 pixels to each column that evens it out so that it does not shrink.

    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width()+17); // 16 - 18
    });

See Example

FIDDLE

来源：https://stackoverflow.com/questions/23086842/how-to-prevent-bootstrap-from-making-the-dragged-row-change-in-width