jquery table 内容居中

原创

mob649e8163f390 2023-11-26 11:56:28 ©著作权

文章标签 jQuery css 代码示例 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8163f390的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery Table 内容居中

在网页开发中，经常会使用到表格来展示数据。但是默认情况下，表格的内容是左对齐的，如果我们希望将表格内容居中显示，就需要使用一些技巧来实现。本文将介绍如何使用 jQuery 来使表格内容居中显示，并提供相应的代码示例。

1. 创建一个基本的 HTML 表格

首先，我们需要创建一个基本的 HTML 表格。以下是一个简单的示例：

<table id="myTable" border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

在这个示例中，我们创建了一个简单的表格，包含三列：姓名、年龄和性别。现在的表格内容是默认左对齐的。

2. 使用 jQuery 居中表格内容

要使表格内容居中显示，我们可以使用 jQuery 的 css() 方法来修改表格单元格的样式。以下是如何使用 jQuery 来居中表格内容的代码示例：

$(document).ready(function() {
  $('#myTable td').css('text-align', 'center');
});

在这个示例中，我们使用了 jQuery 的 $(document).ready() 函数来确保在文档加载完成后再执行代码。$('#myTable td') 选择了所有的表格单元格，并使用 css() 方法将它们的文本对齐方式设置为居中。

3. 完整代码示例

下面是一个完整的示例，演示如何使用 jQuery 居中表格内容：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Table 内容居中</title>
  <script src="
  <script>
    $(document).ready(function() {
      $('#myTable td').css('text-align', 'center');
    });
  </script>
</head>
<body>
  <table id="myTable" border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </table>
</body>
</html>

将上述代码保存为一个 HTML 文件，然后在浏览器中打开该文件，你将看到表格内容已经居中显示了。