js table style

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>34</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>

#myTable {
  width: 100%;
  border-collapse: collapse;
}

#myTable th, #myTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#myTable th {
  background-color: #f2f2f2;
}

function createTable(data) {
  const table = document.getElementById('myTable').getElementsByTagName('tbody')[0];
  data.forEach(item => {
    const row = table.insertRow();
    Object.values(item).forEach(value => {
      const cell = row.insertCell();
      cell.textContent = value;
    });
  });
}

const data = [
  { 姓名: '王五', 年龄: 45, 职业: '经理' },
  { 姓名: '赵六', 年龄: 29, 职业: '程序员' }
];

createTable(data);

table {
  border-collapse: collapse;
}

td {
  white-space: nowrap; /* 防止内容换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr { border: 1px solid #ccc; }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-label);
  }
}