有没有办法让这个下拉列表看起来像一个表格？

<select id="table-like-select">
  <option value="1">Row 1, Column 1</option>
  <option value="2">Row 1, Column 2</option>
  <option value="3">Row 2, Column 1</option>
  <option value="4">Row 2, Column 2</option>
</select>

#table-like-select {
  display: none; /* 隐藏默认的下拉列表 */
}

#table-like-select-table {
  border-collapse: collapse;
  width: 100%;
}

#table-like-select-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

document.addEventListener('DOMContentLoaded', function() {
  const select = document.getElementById('table-like-select');
  const options = select.options;

  // 创建表格
  const table = document.createElement('table');
  table.id = 'table-like-select-table';

  // 将选项添加到表格中
  for (let i = 0; i < options.length; i++) {
    const row = table.insertRow();
    const cell = row.insertCell();
    cell.textContent = options[i].text;
    cell.dataset.value = options[i].value;
  }

  // 将表格添加到页面中
  select.parentNode.insertBefore(table, select);

  // 点击下拉列表时显示表格
  select.addEventListener('click', function() {
    table.style.display = 'table';
  });

  // 点击表格外部时隐藏表格
  document.addEventListener('click', function(event) {
    if (!select.contains(event.target) && event.target !== select) {
      table.style.display = 'none';
    }
  });
});