css 我怎样才能把标题放在table正上方的中间位置？

zazmityj 于 2023-01-03 发布在其他

关注(0)|答案(2)|浏览(121)

我把表格和页眉都对齐了，但是我想把页眉放在表格的中间，而不是右边。而且页眉和表格之间的间隙太大了。我该怎么缩小这个间隙呢？

<body>
    <style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      overflow:hidden;padding:13px 14px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      font-weight:normal;overflow:hidden;padding:13px 14px;word-break:normal;}
    .tg .tg-l183{background-color:#96fffb;border-color:inherit;font-family:"Courier New", Courier, monospace !important;font-size:16px;
      font-weight:bold;text-align:left;vertical-align:top}
    .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
    </style>

    <header>
        <h1>DRAINAGE PLAN</h1>
        <h2>Drainge plan for Cypresshead</h2>
    </header>
 <h2 style="text-align:right">Pump Monitor</h2>
    <table style="margin-top:130px; margin-left:10px;" class="tg" align="right">
    <thead>
      <tr>
        <th class="tg-l183">PUMP</th>
        <th class="tg-l183">START-TIME</th>
        <th class="tg-l183">DURATION(mins)</th>
        <th class="tg-l183">PUMPED(gals)</th>
        <th class="tg-l183">CYCLE</th>
        <th class="tg-l183">STATUS</th>
      </tr>
    </thead>
</table>

css

来源：https://stackoverflow.com/questions/73683464/how-can-i-put-the-header-right-above-the-table-in-center

2条答案

按热度按时间

zfciruhq1#

将标题添加到另一个表格行中：

<body>
    <style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      overflow:hidden;padding:13px 14px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      font-weight:normal;overflow:hidden;padding:13px 14px;word-break:normal;}
    .tg .tg-l183{background-color:#96fffb;border-color:inherit;font-family:"Courier New", Courier, monospace !important;font-size:16px;
      font-weight:bold;text-align:left;vertical-align:top}
    .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
    </style>

    <header>
        <h1>DRAINAGE PLAN</h1>
        <h2>Drainge plan for Cypresshead</h2>
    </header>
    <table style="margin-top:130px; margin-left:10px;" class="tg" align="right">

    <thead>
        <tr>
            <th colspan="6" ><h2 style="margin: 0; padding: 0;">Pump Monitor</h2></th>
        </tr>
      <tr>
        <th class="tg-l183">PUMP</th>
        <th class="tg-l183">START-TIME</th>
        <th class="tg-l183">DURATION(mins)</th>
        <th class="tg-l183">PUMPED(gals)</th>
        <th class="tg-l183">CYCLE</th>
        <th class="tg-l183">STATUS</th>
      </tr>
    </thead>
</table>

可以通过将border: none添加到样式中来删除边框。
我建议重构代码，将所有内联样式添加到一个单独的文件中，或者至少添加到style标记中。

赞(0）回复(0）举报 2023-01-03

llycmphe2#

将表和h2放入一个div中，并向其中添加CSS规则text-align: center。
还要从表格中删除边距规则。margin-top 负责差距，而margin-left将使表格与h2不对齐，因为h2没有它。