How to resize a table column without changing the sizes of the other columns?

Question

I have an HTML table that I've added a bunch of interactive behaviors to (addable, removable, movable columns, rename columns, etc). The last piece of the puzzle is resizable columns. I have it mostly working by allowing the user to click within 5px of a border and then dragging the mouse. My problem is that when a column is resized, the other columns grow or shrink to compensate and keep the table at its width. My desired behavior is to instead grow (or shrink) the table by the amount that the column is resized and to not adjust any of the other column widths. Is this possible with CSS/JS?

Answer 1

table {
  table-layout: fixed;
}