使用 HTML 和 CSS 对齐 2 个表格标题

【问题标题】：Align 2 tables titles using HTML and CSS使用 HTML 和 CSS 对齐 2 个表格标题
【发布时间】：2023-02-01 01:33:15
【问题描述】：

我想在顶部对齐这 2 个表名，就像每个表名都在表的顶部和中间

CSS：

     p{
            color: blue;
        }

        table.table1 {
            float: left;
            display: inline-block
            font-size: large;
            border: 1px solid black;
        }

HTML:

        <p>Employee Table</p>
        <!-- TABLE CONSTRUCTION -->
        <table class="table1">

【问题讨论】：

标签： html css

【解决方案1】：

在你的桌子周围放一些包装纸来进行对齐： https://jsfiddle.net/wf5qargj/

<h1>Main Heading</h1>
<div class="outer">
  <div class="wrapper">
    <h2>Heading T1</h2>
    <table id="t1">
      <tr><td>...<td></tr>
      ....
    </table>
  </div>
  <div class="wrapper">
    <h2>Heading T2</h2>
    <table id="t2">
      <tr><td>...<td></tr>
      ....
    </table>
  </div>
</div>

.outer {
  display: flex;
}
td,th {
  border: 1px solid grey;
}
table {
  width:300px;
}
h2 {
  text-align:center;
}

【讨论】：