css怎么设置表格居中
要使CSS中的表格居中，可以使用多种方法。以下是一些常见的方法：
方法一：使用Flexbox布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table with Flexbox</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使容器占满整个视口高度 */
}
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</div>
</body>
</html>方法二：使用Grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table with Grid</title>
<style>
.container {
display: grid;
place-items: center;
height: 100vh; /* 使容器占满整个视口高度 */
}
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</div>
</body>
</html>方法三：使用绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table with Absolute Positioning</title>
<style>
.container {
position: relative;
height: 100vh; /* 使容器占满整个视口高度 */
}
table {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</div>
</body>
</html>方法四：使用margin自动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table with Margin Auto</title>
<style>
.container {
text-align: center;
}
table {
display: inline-table;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</div>
</body>
</html>总结
以上四种方法都可以实现表格在页面中的居中显示。选择哪种方法取决于你的具体需求和布局情况：
- Flexbox布局：适用于现代浏览器，布局灵活。
- Grid布局：适用于更复杂的二维布局。
- 绝对定位：适用于需要精确控制位置的场景。
- margin自动：适用于简单的居中需求，兼容性较好。
更多关于CSS布局的详细信息，可以参考以下链接：
相关·内容
1回答
在生成PDF (Knit PDF按钮)时，它可以很好地生成格式良好的(居中)表格。使用Knit HTML时，不管有多少列，表格都会分布在页面的整个宽度(浏览器或查看器)上--我希望表格居中显示，因为它们出现在printr vignette ()中。这是一个CSS问题，还是我错过了一个简单的“技巧”？
谢谢
浏览 1提问于2015-04-27得票数 1
2回答
我的css是
.pricing-table ul{border-radius:3px;width:160px;text-align:center;float:left;background-color:
浏览 3提问于2014-03-21得票数 1
1回答
我使用Gitlab已经有一段时间了，在很长一段时间里，我一直喜欢我可以让我的README.md文件看起来很好，我的项目有一个居中的图标，标题和描述。在过渡到CommonMark后，如何在Gitlab中将文本居中？
浏览 0提问于2018-11-13得票数 26
回答已采纳
1回答
如果我将body标签设置为600px，而不是100%，这就解决了这个问题，我只能在所有客户端看到一次背景，但当我这样做时，在Outlook中，文本内容就消失了。
<style type="text/css
浏览 1提问于2012-11-05得票数 3
1回答
如何在表格中设置位置？我有表，其中我有跨度和某些链接。我将<td>设置为居中对齐，并从居中开始跨文本，但当我对所有链接<td>执行相同操作时，所有内容都显示在居中。该怎么做呢？
浏览 0提问于2010-04-09得票数 0
回答已采纳
我只想使用CSS而不是表格来重新创建它<ul><span class="icon-class icon-name"></span></li></ul>
icon-class设置图像、显示块、宽度和高度，
浏览 1提问于2011-10-14得票数 1
回答已采纳
1回答
使元素在浏览器上居中
、、、、
我使用的是，我想让我用这个脚本添加的内容在垂直和水平方向上居中。这是我正在做的网站(fullpagewebsite.blogspot.com)。1424981576" width="816" height="53" alt=""></td></table>我怎么才能把它放在中心呢？
浏览 1提问于2015-02-27得票数 0
1回答
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css<
浏览 2提问于2013-12-19得票数 0
回答已采纳
3回答
我有一个基本的HTML表单，我居中。我正在使用jQuery插件动态验证字段是否为必填字段。当它在文本框后添加"Field is required“消息时，它会导致表单/表因为它在一个表中而移动。我的问题是，最好的方法是保持表格/表单在页面上居中，同时又允许任何动态添加的元素“在”文本框之后添加而不移动表单？
浏览 1提问于2010-10-23得票数 1
回答已采纳
我尝试在div元素中水平和垂直居中定位一个锚点元素。这个问题的基础如下。white; font-style: 14px;现在，我知道我可以在包含的div上使用text-align: center;来水平居中定位元素，我可以在div上使用display: table-cell; vertical-align: middle;来垂直对齐它，但它们似乎不能一起工作，特别是当div设置为左浮动时。
浏览 0提问于2014-07-27得票数 2
回答已采纳
我的当前项目使用表格进行布局设计，我正在尝试将所有内容转换为使用CSS与DIV和其他元素，除了表格。我的项目包括：正文文件当我使用表格时，我只会在正文文件开始之前在页眉中启动一个表格，然后在页脚中关闭该表格，我使用这种方法来确保所有内容始终在设定的宽度内，例如800px宽居中。-- end body - begin footer -->我的body_wrapper目录的css
.body
浏览 2提问于2009-08-19得票数 0
回答已采纳
2回答
在弹性背景环境中居中容器
、、、
如果我读得很好(只是看了一下)，它是用一些javascript设置的表格，这样一个居中的容器可以始终保持在中心，并且主体有两个流色背景，根据屏幕的大小扩展。我试图重现这样的东西，但仅仅使用css，我很确定我可以，但不知道怎么做。请您给我一些指示/文件让我阅读。
浏览 0提问于2013-09-03得票数 2
3回答
我有一个表格，我正在使用css来显示底部边框。是否有我应该查看的属性，或者我应该研究的CSS技巧，以使表格保持完好，并能够看到居中但仅占表格宽度80%的底部边框？
浏览 1提问于2018-11-14得票数 0
我正在尝试为动态加载的checkboxlist做一个很好的布局，但当涉及到CSS时，我却相当无能。我希望复选框填满面板主体的空间，居中对齐，然后开始一个新的行。repeat columns属性使它们成为一个漂亮的表格，但我不能在面板主体内居中对齐它们。
浏览 0提问于2015-10-19得票数 0
使用div's和设置绝对位置不起作用，因为中间部分的流体高度。使用一个有三个高度的表:顶部和底部的自动或50%不起作用……
浏览 3提问于2014-08-23得票数 0
我通常使用margin:0 auto的CSS规则和一个960容器来处理我的基于浏览器的标准内容，但我是一个创建电子邮件的新手，我有以下的设计，现在我想在浏览器窗口居中而不使用标准的CSS。我似乎记得在某个地方看到过，也可以通过将您的电子邮件表设计包装在一个设置为width:100%的外部表中，并在tbody上使用一些text-align:center的内联样式或类似这样的东西来完成它？
浏览 5提问于2010-05-18得票数 103
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
腾讯会议活动推荐
腾讯云开发者
