CSS 表格動態添加列是一個常見的需求，這是 web 開發中常見的技巧之一，通過代碼的編寫，我們可以輕松地方便地實現這一操作。下面我們將簡要介紹如何使用 CSS 表格動態添加列。

首先，我們需要使用<table>標簽來創建一個表格，然后使用 CSS 選擇器來選擇這個表格，如下所示：

table {
width: 100%;
text-align: left;
border-collapse: collapse;
}

接下來，我們需要添加表格頭部和表格主體，如下所示：

<table><thead><tr><th>表頭 1</th><th>表頭 2</th><th>表頭 3</th><th>表頭 4</th></tr></thead><tbody><tr><td>內容 1</td><td>內容 2</td><td>內容 3</td><td>內容 4</td></tr><tr><td>內容 5</td><td>內容 6</td><td>內容 7</td><td>內容 8</td></tr></tbody></table>

上面的代碼使用了<thead>和<tbody>標簽，用于標識表格頭部和主體部分。接下來我們可以使用 JavaScript 代碼來實現動態添加列的操作，如下所示：

function addColumn() {
// 獲取表格對象
var table = document.querySelector('table');
// 獲取表頭行對象
var thRow = table.querySelector('thead tr');
// 獲取主體部分行對象集合
var tdRows = table.querySelectorAll('tbody tr');
// 創建新的表頭單元格對象
var newTh = document.createElement('th');
newTh.textContent = '表頭 ' + (thRow.childElementCount + 1); // 設置表頭單元格內容
// 循環遍歷主體部分行對象集合，向每行對象末尾添加新的單元格對象
for (var i = 0; i< tdRows.length; i++) {
var newTd = document.createElement('td'); // 創建新的單元格對象
newTd.textContent = '內容 ' + ((i * thRow.childElementCount) + thRow.childElementCount + 1); // 設置單元格內容
tdRows[i].appendChild(newTd); // 添加單元格對象到行對象末尾
}
// 添加新的表頭單元格對象到表頭行對象末尾
thRow.appendChild(newTh);
}

以上代碼會根據當前表格的列數量，在表頭和主體部分分別添加一個新的單元格對象，并設置相應的內容。

最后，我們需要為添加列的操作綁定事件，如下所示：

var btn = document.querySelector('button'); // 獲取添加列按鈕
btn.addEventListener('click', addColumn); // 綁定添加列事件

通過以上代碼，我們就可以實現一個具有動態添加列功能的表格，為用戶提供更加便捷的數據展示方式。