在每张桌子的顶部用H4标签并排获取桌子

时间：2016-10-24 21:50:42

标签： html css html-table

我不能让这个为我的生活工作。我希望将两个表并排放在同一行上，并将h4标记放在右表的顶部，这是假设的。我可以在没有h4标签的情况下并排获得表格，但我想要h4标签。这些表也是左边一个，右边一个。很抱歉，如果这很多。

这是我到目前为止所拥有的。 

.table1,
#tableTitle1 {
  float: left;
  display: inline-block;
}
.table2,
#tableTitle2 {
  float: right;
  display: inline-block;
}
.table1,
.table2 {
  height: 230px;
  display: inline-block;
  text-align: center;
}
table,
td,
th {
  border: 1px solid black;
  padding: 5px;
  border-spacing: 3px;
}
<!--First Table-->
<h4 id="tableTitle1">Graduates Status 2015</h4>
<table class="table1">
  <tr>
    <th>Graduates</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>5218</td>
    <td>Available for Employment</td>
  </tr>
  <tr>
    <td>936</td>
    <td>Future Education</td>
  </tr>
  <tr>
    <td>158</td>
    <td>Not Seeking Employment</td>
  </tr>
  <tr>
    <td>1866</td>
    <td>Unable to Contact</td>
  </tr>
</table>
<!--Second Table-->
<h4 id="tableTitle1">Graduates Employment Rates</h4>
<table class="table2">
  <tr>
    <th>Graduates</th>
    <th>Employment Rates (100%)</th>
  </tr>
  <tr>
    <td>Employment Related (Full-time)</td>
    <td>46.1%</td>
  </tr>
  <tr>
    <td>Employment Related (Part-time)</td>
    <td>8.3%</td>
  </tr>
  <tr>
    <td>Employment Unrelated (Full-time)</td>
    <td>19.8%</td>
  </tr>
  <tr>
    <td>Employment Unrelated (Part-time)</td>
    <td>16.2</td>
  </tr>
  <tr>
    <td>Not Employment</td>
    <td>19%</td>
  </tr>
</table>

5 个答案:

答案 0 :(得分：2)

为什么不简单地将标题添加为表格标题，这里有一个额外的包装，以保持它们并排，顶部对齐。

＆＃13;
＆＃13; 
.tablewrap {
  white-space: nowrap;
}
#tableTitle1,
#tableTitle2 {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
}
.table1,
.table2 {
  height: 230px;
  display: inline-table;
  text-align: center;
  white-space: normal;
  vertical-align: top;
}
table,
td,
th {
  border: 1px solid black;
  padding: 5px;
  border-spacing: 3px;
}
＆＃13; 
<div class="tablewrap">
  <!--First Table-->
  <table class="table1">
    <caption id="tableTitle1">
      Graduates Status 2015
    </caption>
    <tr>
      <th>Graduates</th>
      <th>Status</th>
    </tr>
    <tr>
      <td>5218</td>
      <td>Available for Employment</td>
    </tr>
    <tr>
      <td>936</td>
      <td>Future Education</td>
    </tr>
    <tr>
      <td>158</td>
      <td>Not Seeking Employment</td>
    </tr>
    <tr>
      <td>1866</td>
      <td>Unable to Contact</td>
    </tr>
  </table>
  <!--Second Table-->
  <table class="table2">
    <caption id="tableTitle1">Graduates Employment Rates</caption>
    <tr>
      <th>Graduates</th>
      <th>Employment Rates (100%)</th>
    </tr>
    <tr>
      <td>Employment Related (Full-time)</td>
      <td>46.1%</td>
    </tr>
    <tr>
      <td>Employment Related (Part-time)</td>
      <td>8.3%</td>
    </tr>
    <tr>
      <td>Employment Unrelated (Full-time)</td>
      <td>19.8%</td>
    </tr>
    <tr>
      <td>Employment Unrelated (Part-time)</td>
      <td>16.2</td>
    </tr>
    <tr>
      <td>Not Employment</td>
      <td>19%</td>
    </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

只需将表格和H4包装在一个div中，然后浮动它们：

//css
    .table-wrapper {
      float: left;
      width: 50%;
    }

//html

    <div class="table-wrapper">
        <h4 id="tableTitle1">Graduates Status 2015</h4>
        <table class="table1">
         ...
        </table>
    </div>

https://jsfiddle.net/jrp1f2dg/

答案 2 :(得分：0)

您只需将所需的html元素包装到span中，然后使用css将flex属性应用于它们。请参阅codepen。

HTML：

<!--First Table-->
<span class="flex-wrapper">
  <span class="flex-wrapper columns">
        <h1 id="tableTitle1">Graduates Status 2015</h4>
        <table class="table1">
            <tr>
                <th>Graduates</th>
                <th>Status</th>
            </tr>
            <tr>
                <td>5218</td>
                <td>Available for Employment</td>
            </tr>
            <tr>
                <td>936</td>
                <td>Future Education</td>
            </tr>
            <tr>
                <td>158</td>
                <td>Not Seeking Employment</td>
            </tr>
            <tr>
                <td>1866</td>
                <td>Unable to Contact</td>
            </tr>
        </table>
  </span>
<span class="flex-wrapper columns">
        <!--Second Table-->
        <h1 id="tableTitle1">Graduates Employment Rates</h4>
        <table class="table2">
            <tr>
                <th>Graduates</th>
                <th>Employment Rates (100%)</th>
            </tr>
            <tr>
                <td>Employment Related (Full-time)</td>
                <td>46.1%</td>
            </tr>
            <tr>
                <td>Employment Related (Part-time)</td>
                <td>8.3%</td>
            </tr>
            <tr>
                <td>Employment Unrelated (Full-time)</td>
                <td>19.8%</td>
            </tr>
            <tr>
                <td>Employment Unrelated (Part-time)</td>
                <td>16.2</td>
            </tr>
            <tr>
                <td>Not Employment</td>
                <td>19%</td>
            </tr>
            </table>
    </span>
</span>

的CSS：

.flex-wrapper {
  display: flex
}

.columns {
  flex-direction: column
}

.table1,
#tableTitle1 {
  float: left;
  display: inline-block;
}

.table2,
#tableTitle2 {
  float: right;
  display: inline-block;
}

.table1,
.table2 {
  height: 230px;
  display: inline-block;
  text-align: center;
}

table,
td,
th {
  border: 1px solid black;
  padding: 5px;
  border-spacing: 3px;
}

以下是它的样子：

enter image description here

答案 3 :(得分：0)

你有display：inline-table.It只是让table元素表现为内联 我想我们可以在这里使用它 检查这个[link] [1] 希望这有帮助

答案 4 :(得分：0)

您输入的第二个ID错误，可能是tableTitle2而不是tableTitle1 然后用<h4>将div包裹在每个表格中并为其应用float：

<div class="left">
  ..your markup..
</div>
<div class="right">
  ..your markup..
</div>

.left {
  float: left;
}
.right {
  float: right;
}

Jsfiddle

如果您想要响应表，请使用百分比表示宽度：

div {
  width: 50%;
}
.table1,
.table2 {
  width: 100%;
}

Jsfiddle2

我评论了所有未使用的css

相关问题
最新问题