正文

轻松掌握JS设置表格居中技巧，快速让表格内容水平垂直居中显示

/0 浏览量
0719

在网页设计中，表格是一个常用的元素，用于展示数据。为了让表格内容在页面上看起来更加美观和易于阅读，我们常常需要将表格内容进行居中处理。本文将介绍如何使用JavaScript轻松实现表格内容的水平垂直居中显示。

1. CSS样式实现

首先，我们可以通过CSS样式来实现表格内容的居中。以下是几种常用的CSS样式方法：

1.1 使用text-align和vertical-align

table {
  margin: 0 auto; /* 水平居中 */
}

td, th {
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

这种方法简单易用，但只适用于表格内容本身，表格边框仍然会保持原位。

1.2 使用display: table-cell和text-align

table {
  display: table;
  margin: 0 auto; /* 水平居中 */
}

td, th {
  display: table-cell;
  text-align: center; /* 水平居中 */
}

这种方法可以使表格边框也实现水平居中，但无法实现垂直居中。

1.3 使用Flexbox

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置容器高度为视口高度 */
}

table {
  width: 100%; /* 设置表格宽度为容器宽度 */
}

这种方法可以实现表格内容的水平和垂直居中，但需要额外的容器元素。

2. JavaScript实现

除了CSS样式，我们还可以使用JavaScript来实现表格内容的居中。以下是一种使用JavaScript实现表格内容水平和垂直居中的方法：

function centerTable() {
  var tables = document.getElementsByTagName('table');
  for (var i = 0; i < tables.length; i++) {
    var table = tables[i];
    var width = table.offsetWidth;
    var height = table.offsetHeight;
    var parentWidth = table.parentNode.offsetWidth;
    var parentHeight = table.parentNode.offsetHeight;
    
    table.style.left = (parentWidth - width) / 2 + 'px';
    table.style.top = (parentHeight - height) / 2 + 'px';
  }
}

centerTable(); // 初始化居中
window.onresize = centerTable; // 窗口大小改变时重新居中

这段代码通过计算表格和其父元素的宽度和高度，动态设置表格的位置，从而实现水平和垂直居中。需要注意的是，这种方法可能无法在所有浏览器中正常工作。

3. 总结

本文介绍了使用CSS样式和JavaScript实现表格内容水平和垂直居中的方法。在实际应用中，我们可以根据具体需求选择合适的方法。希望本文能帮助您轻松掌握表格居中的技巧。

-- 展开阅读全文 --