英文:
How to center tables within page for two parallel div?
问题
以下是您要翻译的内容：
"I have 2 parallel div and within each div there are one or more stacked tables.
I'm trying to center the tables in the page, so for the table in left <div> should be moved to the right and table in right <div> should be moved to the left. I'd like a fixed horizontal separation between tables of 50px.
With my current CSS code I'm able to move the table in right <div> to the left, but I'm stuck in how to move the table in left <div> to the right. Thanks for any help.
Current output
Output I'm looking for
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Table Generator</title>
<style>
body {
text-align: center;
}
#inputContainer {
margin-bottom: 20px;
}
#tableContainer {
display: flex;
justify-content: space-between;
margin: 0 -25px;
padding: 40px;
box-sizing: border-box;
}
.tableWrapperLeft {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
}
.tableWrapperRight {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
}
table {
border-collapse: collapse;
margin-bottom: 50px;
width: 288px;
height: 288px;
}
td {
border: 1px dotted black;
text-align: center;
}
td:first-child {
border-left: 1px dotted black;
}
tr:first-child td {
border-top: 1px dotted black;
}
.tableWrapperRight table {
border: 2px solid green;
}
.tableWrapperLeft table {
border: 2px solid green;
}
</style>
</head>
<body>
<div id="tableContainer">
<div class="tableWrapperLeft">
<table>
<tr>
<td>V</td><td>W</td><td>E</td><td>G </td>
</tr>
<tr>
<td>G</td><td>K</td><td>L</td><td>D </td>
</tr>
<tr>
<td>W</td><td>F</td><td>U</td><td>N </td>
</tr>
<tr>
<td>G</td><td>A</td><td>Q</td><td>L </td>
</tr>
</table>
</div>
<div class="tableWrapperRight">
<table>
<tr>
<td>U</td><td>N</td><td>P</td><td>H </td>
</tr>
<tr>
<td>Q</td><td>L</td><td>R</td><td>B </td>
</tr>
<tr>
<td>J</td><td>B</td><td>I</td><td>N </td>
</tr>
<tr>
<td>D</td><td>A</td><td>H</td><td>T </td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
更新
使用@fatm提供的解决方案，如果每个<div>中有多个表格，左侧的<div>会出现问题，看起来像这样。
英文:
I have 2 parallel div and within each div there are one or more stacked tables.
I'm trying to center the tables in the page, so for the table in left <div> should be moved to the right and table in right <div> should be moved to the left. I'd like a fixed horizontal separation between tables of 50px.
With my current CSS code I´m able to move the table in right <div> to the left, but I'm stuck in how to move the table in left <div> to the right. Thanks for any help.
Current output
Output I'm looking for
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Table Generator</title>
<style>
body {
text-align: center;
}
#inputContainer {
margin-bottom: 20px;
}
#tableContainer {
display: flex;
justify-content: space-between;
margin: 0 -25px;
padding: 40px;
box-sizing: border-box;
}
.tableWrapperLeft {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
}
.tableWrapperRight {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
}
table {
border-collapse: collapse;
margin-bottom: 50px;
width: 288px;
height: 288px;
}
td {
border: 1px dotted black;
text-align: center;
}
td:first-child {
border-left: 1px dotted black;
}
tr:first-child td {
border-top: 1px dotted black;
}
.tableWrapperRight table {
border: 2px solid green;
}
.tableWrapperLeft table {
border: 2px solid green;
}
</style>
</head>
<body>
<div id="tableContainer">
<div class="tableWrapperLeft">
<table>
<tr>
<td>V</td><td>W</td><td>E</td><td>G </td>
</tr>
<tr>
<td>G</td><td>K</td><td>L</td><td>D </td>
</tr>
<tr>
<td>W</td><td>F</td><td>U</td><td>N </td>
</tr>
<tr>
<td>G</td><td>A</td><td>Q</td><td>L </td>
</tr>
</table>
</div>
<div class="tableWrapperRight">
<table>
<tr>
<td>U</td><td>N</td><td>P</td><td>H </td>
</tr>
<tr>
<td>Q</td><td>L</td><td>R</td><td>B </td>
</tr>
<tr>
<td>J</td><td>B</td><td>I</td><td>N </td>
</tr>
<tr>
<td>D</td><td>A</td><td>H</td><td>T </td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
UPDATE
With solution provided by @fatm, I have issues in left "div", if each "div" has more than one table and looks like this.
答案1
得分: 1
body {
text-align: center;
}
#inputContainer {
margin-bottom: 20px;
}
#tableContainer {
display: flex;
justify-content: space-between;
margin: 0 -25px;
padding: 40px;
box-sizing: border-box;
}
.tableWrapperLeft {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
display: flex;
justify-content: end;
}
.tableWrapperRight {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
}
table {
border-collapse: collapse;
margin-bottom: 50px;
width: 288px;
height: 288px;
}
td {
border: 1px dotted black;
text-align: center;
}
td:first-child {
border-left: 1px dotted black;
}
tr:first-child td {
border-top: 1px dotted black;
}
.tableWrapperRight table {
border: 2px solid green;
}
.tableWrapperLeft table {
border: 2px solid green;
}
<div id="tableContainer">
<div class="tableWrapperLeft">
<table>
<tr>
<td>V</td>
<td>W</td>
<td>E</td>
<td>G </td>
</tr>
<tr>
<td>G</td>
<td>K</td>
<td>L</td>
<td>D </td>
</tr>
<tr>
<td>W</td>
<td>F</td>
<td>U</td>
<td>N </td>
</tr>
<tr>
<td>G</td>
<td>A</td>
<td>Q</td>
<td>L </td>
</tr>
</table>
</div>
<div class="tableWrapperRight">
<table>
<tr>
<td>U</td>
<td>N</td>
<td>P</td>
<td>H </td>
</tr>
<tr>
<td>Q</td>
<td>L</td>
<td>R</td>
<td>B </td>
</tr>
<tr>
<td>J</td>
<td>B</td>
<td>I</td>
<td>N </td>
</tr>
<tr>
<td>D</td>
<td>A</td>
<td>H</td>
<td>T </td>
</tr>
</table>
</div>
</div>
</div>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
text-align: center;
}
#inputContainer {
margin-bottom: 20px;
}
#tableContainer {
display: flex;
justify-content: space-between;
margin: 0 -25px;
padding: 40px;
box-sizing: border-box;
}
.tableWrapperLeft {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
display: flex;
justify-content: end;
}
}
.tableWrapperRight {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
}
table {
border-collapse: collapse;
margin-bottom: 50px;
width: 288px;
height: 288px;
}
td {
border: 1px dotted black;
text-align: center;
}
td:first-child {
border-left: 1px dotted black;
}
tr:first-child td {
border-top: 1px dotted black;
}
.tableWrapperRight table {
border: 2px solid green;
}
.tableWrapperLeft table {
border: 2px solid green;
}
<!-- language: lang-html -->
<div id="tableContainer">
<div class="tableWrapperLeft">
<table>
<tr>
<td>V</td>
<td>W</td>
<td>E</td>
<td>G </td>
</tr>
<tr>
<td>G</td>
<td>K</td>
<td>L</td>
<td>D </td>
</tr>
<tr>
<td>W</td>
<td>F</td>
<td>U</td>
<td>N </td>
</tr>
<tr>
<td>G</td>
<td>A</td>
<td>Q</td>
<td>L </td>
</tr>
</table>
</div>
<div class="tableWrapperRight">
<table>
<tr>
<td>U</td>
<td>N</td>
<td>P</td>
<td>H </td>
</tr>
<tr>
<td>Q</td>
<td>L</td>
<td>R</td>
<td>B </td>
</tr>
<tr>
<td>J</td>
<td>B</td>
<td>I</td>
<td>N </td>
</tr>
<tr>
<td>D</td>
<td>A</td>
<td>H</td>
<td>T </td>
</tr>
</table>
</div>
</div>
</div>
<!-- end snippet -->
答案2
得分: 1
尝试更改特定div的flex-direction，然后只需使用flex的起始或结束对齐来实现。
英文:
try to change the flex-direction of a certain div then just use flex start or end for alignment to able to achieve.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
text-align: center;
}
#inputContainer {
margin-bottom: 20px;
}
#tableContainer {
display: flex;
justify-content: space-between;
margin: 0 -25px;
padding: 40px;
box-sizing: border-box;
}
.tableWrapperLeft {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.tableWrapperRight {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
display: flex;
flex-direction: column;
align-items: flex-start;
}
table {
border-collapse: collapse;
margin-bottom: 50px;
width: 288px;
height: 288px;
}
td {
border: 1px dotted black;
text-align: center;
}
td:first-child {
border-left: 1px dotted black;
}
tr:first-child td {
border-top: 1px dotted black;
}
.tableWrapperRight table {
border: 2px solid green;
}
.tableWrapperLeft table {
border: 2px solid green;
}
<!-- language: lang-html -->
<body>
<div id="tableContainer">
<div class="tableWrapperLeft">
<table>
<tr>
<td>V</td><td>W</td><td>E</td><td>G </td>
</tr>
<tr>
<td>G</td><td>K</td><td>L</td><td>D </td>
</tr>
<tr>
<td>W</td><td>F</td><td>U</td><td>N </td>
</tr>
<tr>
<td>G</td><td>A</td><td>Q</td><td>L </td>
</tr>
</table>
</div>
<div class="tableWrapperRight">
<table>
<tr>
<td>U</td><td>N</td><td>P</td><td>H </td>
</tr>
<tr>
<td>Q</td><td>L</td><td>R</td><td>B </td>
</tr>
<tr>
<td>J</td><td>B</td><td>I</td><td>N </td>
</tr>
<tr>
<td>D</td><td>A</td><td>H</td><td>T </td>
</tr>
</table>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论