<!DOCTYPE html> <style> table { table-layout: fixed; border: 1px solid black; width: 300px; } td { background: yellow; border: 1px solid purple; } </style> <table> <colgroup> <col> <col> <col> <col> </colgroup> <tbody> <td>One</td> <td>Two</td> <td>Three</td> </tbody> </table> <script> var t = document.querySelector("table"); // Flush layout var width = t.offsetWidth; // Remove the one colgroup document.querySelector("colgroup").remove(); </script>