我想问一下如何垂直对齐表格列。例如，如果我有表x和表y，然后在表之间添加一些内容，如何将列放在同一行（垂直位于同一位置）。我尝试了引导程序类，但没有任何效果。我应该添加填充或边距吗？我也希望表响应（引导类表响应）。这是一个代码：https :
//codepen.io/S4UCY/pen/OJNWqzg?editors=1100
.container {
position: relative;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.table td,
.table th {
width: 50%;
padding-left: 10px;
word-break: break-word;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<h2><i class="fas fa-home"></i> Table x</h2>
<table class="table table-responsive">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
</tr>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
</tr>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
</tr>
</tbody>
</table>
<p>Suspendisse potenti. Sed eu dui at magna finibus vehicula. Suspendisse sagittis ipsum arcu. Quisque non elit et purus finibus vehicula. Vivamus faucibus tincidunt erat, sit amet auctor risus luctus nec. Nunc commodo tristique enim, et rhoncus</p>
<h2><i class="fas fa-home"></i> Table y</h2>
<table class="table table-responsive">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam</td>
</tr>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisis</td>
</tr>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisisEtiam facilisisEtiam facilisis</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>问题是.table-responsive该类display从默认值更改table为block。由于此类不会为您做任何其他事情（至少在您发布的代码中），因此只需将其删除即可-请参见下面的示例。
您还在评论中询问了如何将表格居中。当您使用bootstraps表类时，该表设置为100％，因此没有任何要居中的位置，因为它已经占用了整个宽度。
要使表格在页面中居中，首先需要设置想要的宽度（或最大宽度），然后再设置margin:auto，例如
.table { max-width:1000px; margin:auto; }
工作代码段（单击“扩展代码段”链接可全屏查看它，并查看排列的表列。）
.container {
position: relative;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.table td,
.table th {
width: 50%;
padding-left: 10px;
word-break: break-word;
}
.table {
max-width:1000px;
margin:auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<h2><i class="fas fa-home"></i> Table x</h2>
<table class="table">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
</tr>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
</tr>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisis fringilla arcu id commodo.Etiam facilisis fringilla arcu id commodo.</td>
</tr>
</tbody>
</table>
<p>Suspendisse potenti. Sed eu dui at magna finibus vehicula. Suspendisse sagittis ipsum arcu. Quisque non elit et purus finibus vehicula. Vivamus faucibus tincidunt erat, sit amet auctor risus luctus nec. Nunc commodo tristique enim, et rhoncus</p>
<h2><i class="fas fa-home"></i> Table y</h2>
<table class="table">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam</td>
</tr>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisis</td>
</tr>
<tr>
<th class="table-cell" scope="row">Etiam</th>
<td>Etiam facilisisEtiam facilisisEtiam facilisis</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句