发表新帖
发表新帖

How to put table in the center of the page using CSS?

后端 未结
关注
6 1006
别那么骄傲
别那么骄傲 2020-12-04 22:51

I am using the following code. How to put this table in the center of the page using CSS?
相关标签:
6条回答
  • 时光说笑
    2020-12-04 23:29

    simply put it in the div then control that div whit css:

    <div class="your_position">
  <table>
  </table>
</div>
    0 讨论(0)
  • 情歌与酒
    2020-12-04 23:33 
    html, body {
    width: 100%;
}
table {
    margin: 0 auto;
}

    Example JSFiddle

    Vertically aligning block elements is not the most trivial thing to do. Some methods below.

    • Understanding vertical-align, or "How (Not) To Vertically Center Content"
    • Vertical Centering in CSS
    0 讨论(0)
  • 执笔经年
    2020-12-04 23:36

    You can try using the following CSS:

    table {
    margin: 0 auto;            
}​
    0 讨论(0)
  • 闹比i
    2020-12-04 23:49

    If you where asking about the table to complete center, like some thing in total center., you can apply the following code.

    margin: 0px auto;
margin-top: 13%;

    this code in css will let you put your table like floating. Tell me if it helps you out.

    0 讨论(0)
  • 隐瞒了意图╮
    2020-12-04 23:51

    1) Setting horizontal alignment to auto in CSS

    margin-left: auto; margin-right: auto;

    2) Get vertical alignment to centre of the page add following to css

    html, body { width: 100%; }

    For example :

    <html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}

html, body {
    width: 100%;
}

</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
        <tr>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
        </tr>
</table>

</body>
</html>
    0 讨论(0)
  • 感情败类
    2020-12-04 23:51 
    <html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}
</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
  <tr>
    <th>SNO</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>1</td>
    <td>yazali</td>
  </tr>
</table>

</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题