需要帮助在 HTML 中将表格居中
[英]Need help centering a table in HTML
问题描述
我现在正在开发一个 python web 应用程序检查器，所以我正在为它构建我的模板。 但是，我无法在不破坏其纵横比的情况下将主棋盘格居中放置在屏幕上。
这是它现在的样子：
这是我想要的样子：
你能建议我对我的代码进行一些更改吗？
ol { margin: 0; padding: 0 } table td, table th { padding: 0 }.c0 { border-right-style: solid; border-bottom-color: #000000; border-top-width: 1pt; border-right-width: 1pt; border-left-color: #000000; vertical-align: middle; border-right-color: #000000; border-left-width: 1pt; border-top-style: solid; background-color: #000000; border-left-style: solid; border-bottom-width: 1pt; width: 56.7pt; border-top-color: #000000; border-bottom-style: solid }.c2 { border-right-style: solid; border-bottom-color: #000000; border-top-width: 1pt; border-right-width: 1pt; border-left-color: #000000; vertical-align: middle; border-right-color: #000000; border-left-width: 1pt; border-top-style: solid; border-left-style: solid; border-bottom-width: 1pt; width: 56.7pt; border-top-color: #000000; border-bottom-style: solid }.c7 { color: #000000; font-weight: 400; text-decoration: none; vertical-align: baseline; font-size: 11pt; font-family: "Arial"; font-style: normal }.c6 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.15; orphans: 2; widows: 2; text-align: left; height: 11pt }.c1 { color: #ffffff; font-weight: 400; text-decoration: none; vertical-align: baseline; font-size: 50pt; font-family: "Arial"; font-style: normal }.c12 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.15; text-align: center; height: 11pt }.c3 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.0; text-align: center; height: 11pt }.c4 { padding-top: 0pt; padding-bottom: 0pt; line-height: 1.0; text-align: center }.c10 { margin-left: auto; border-spacing: 0; border-collapse: collapse; margin-right: auto }.c8 { background-color: #ffffff; max-width: 451.4pt; padding: 72pt 72pt 72pt 72pt }.c11 { orphans: 2; widows: 2 }.c9 { margin-right: 5.1pt }.c5 { height: 56.7pt }.title { padding-top: 0pt; color: #000000; font-size: 26pt; padding-bottom: 3pt; font-family: "Arial"; line-height: 1.15; page-break-after: avoid; orphans: 2; widows: 2; text-align: left }.subtitle { padding-top: 0pt; color: #666666; font-size: 15pt; padding-bottom: 16pt; font-family: "Arial"; line-height: 1.15; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } li { color: #000000; font-size: 11pt; font-family: "Arial" } p { margin: 0; color: #000000; font-size: 11pt; font-family: "Arial" } h1 { padding-top: 20pt; color: #000000; font-size: 20pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.15; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h2 { padding-top: 18pt; color: #000000; font-size: 16pt; padding-bottom: 6pt; font-family: "Arial"; line-height: 1.15; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h3 { padding-top: 16pt; color: #434343; font-size: 14pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.15; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h4 { padding-top: 14pt; color: #666666; font-size: 12pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.15; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h5 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.15; page-break-after: avoid; orphans: 2; widows: 2; text-align: left } h6 { padding-top: 12pt; color: #666666; font-size: 11pt; padding-bottom: 4pt; font-family: "Arial"; line-height: 1.15; page-break-after: avoid; font-style: italic; orphans: 2; widows: 2; text-align: left }
<html> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> </head> <body class="c8"> <p class="c6"><span class="c7"></span></p> <a id="t.e9fce3736f9827f2937bda8f2c218a755be7fe1b"></a> <a id="t.0"></a> <table class="c10"> <tbody> <tr class="c5"> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">a</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">b</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">c</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">d</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3 c9"><span class="c1"></span></p> </td> </tr> <tr class="c5"> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">e</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">f</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4 c11"><span class="c1">g</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">h</span></p> </td> </tr> <tr class="c5"> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">i</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">j</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">k</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">l</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> </tr> <tr class="c5"> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> </tr> <tr class="c5"> <td class="c0" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> </tr> <tr class="c5"> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">a</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">b</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">c</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">d</span></p> </td> </tr> <tr class="c5"> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">e</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">f</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">g</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">h</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> </tr> <tr class="c5"> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">i</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">j</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">k</span></p> </td> <td class="c2" colspan="1" rowspan="1"> <p class="c3"><span class="c1"></span></p> </td> <td class="c0" colspan="1" rowspan="1"> <p class="c4"><span class="c1">l</span></p> </td> </tr> </tbody> </table> <p class="c11 c12"><span class="c7"></span></p> </body> </html>
1 个解决方案
解决方案1
2 2021-06-11 01:12:31
首先，您不应该为此使用表格，因为这不是表格数据。 您想使用 CSS-Grid，因为它创建了一个类似于布局的表格，其 HTML 方面的硬编码远少于表格。
将表格包裹在flexbox内并使用justify-content: center将其与水平中心对齐。 然后使用align-items: center; 将板对齐在垂直中心。
grid本身的column width应该等于row height 。 这样它们就保持为正方形而不依赖于行高。
/* centers the board horizontally and vertically in the screen */ body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* creates a grid (table like layout) */.board { display: grid; border: 3px solid black; width: min-content; } /* sets the height and width in landscape mode to fit the screen responsivly */ @media only screen and (orientation: landscape) {.board { grid-template-columns: repeat(8, 10vh); grid-auto-rows: 10vh; } } /* sets the height and width in portrait mode to fit the screen responsivly */ @media only screen and (orientation: portrait) {.board { grid-template-columns: repeat(8, 10vw); grid-auto-rows: 10vw; } } /* centers the element within a grid-card (cell) */.board > div { display: flex; justify-content: center; align-items: center; } /* coloring the cells to look like a chessboard */.board:nth-child(-n+8):nth-child(odd), .board:nth-child(n+9):nth-child(-n+16):nth-child(even), .board:nth-child(n+17):nth-child(-n+24):nth-child(odd), .board:nth-child(n+25):nth-child(-n+32):nth-child(even), .board:nth-child(n+33):nth-child(-n+40):nth-child(odd), .board:nth-child(n+41):nth-child(-n+48):nth-child(even), .board:nth-child(n+49):nth-child(-n+56):nth-child(odd), .board:nth-child(n+57):nth-child(-n+64):nth-child(even){ background-color: black; color: white; }
<div class="board"> <!-- 1st row --> <div class="A1">a</div> <div class="B1"></div> <div class="C1">b</div> <div class="D1"></div> <div class="E1">c</div> <div class="F1"></div> <div class="G1">d</div> <div class="H1"></div> <!-- 2nd row --> <div class="A2"></div> <div class="B2">e</div> <div class="C2"></div> <div class="D2">f</div> <div class="E2"></div> <div class="F2">g</div> <div class="G2"></div> <div class="H2">h</div> <!-- 3rd row --> <div class="A3">i</div> <div class="B3"></div> <div class="C3">j</div> <div class="D3"></div> <div class="E3">k</div> <div class="F3"></div> <div class="G3">l</div> <div class="H3"></div> <!-- 4th row --> <div class="A4"></div> <div class="B4"></div> <div class="C4"></div> <div class="D4"></div> <div class="E4"></div> <div class="F4"></div> <div class="G4"></div> <div class="H4"></div> <!-- 5th row --> <div class="A5"></div> <div class="B5"></div> <div class="C5"></div> <div class="D5"></div> <div class="E5"></div> <div class="F5"></div> <div class="G5"></div> <div class="H5"></div> <!-- 6th row --> <div class="A6"></div> <div class="B6">a</div> <div class="C6"></div> <div class="D6">b</div> <div class="E6"></div> <div class="F6">c</div> <div class="G6"></div> <div class="H6">d</div> <!-- 7th row --> <div class="A7">e</div> <div class="B7"></div> <div class="C7">f</div> <div class="D7"></div> <div class="E7">g</div> <div class="F7"></div> <div class="G7">h</div> <div class="H7"></div> <!-- 8th row --> <div class="A8"></div> <div class="B8">i</div> <div class="C8"></div> <div class="D8">j</div> <div class="E8"></div> <div class="F8">k</div> <div class="G8"></div> <div class="H8">l</div> </div>
需要帮助将表格居中放置在div容器中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.