时间戳

首页 > 解决方案 > HTML - 浮动 3 个表格并排，但下方有文本

html - HTML - 浮动 3 个表格并排，但下方有文本

问题描述

我正在使用 3 张桌子并排放置<table style="float:left;">，这很好用。但是，我在最底部有一些我想要的文本，我希望它是左对齐的。目前，它只是被包裹在最右边的桌子的右侧。我已经确认它在我所有的桌子之外。我的html如下。这将创建 3 个表，其中包含嵌套表。3 个主表并排排列，但我希望文本位于底部而不是向左推...

td,
th {
  font-family: calibri;
  border: 1px solid black;
  padding: 2px;
}

.tablestyle {
  font-family: calibri;
  border: 1px solid black;
  width: 420px;
}

.wide {
  width: 40%;
}

.thin {
  width: 20%;
}
<h2>Weather Summary for <u>$date</u>:</h2><br>

<table style="float:left;">
  <table class="tablestyle">
    <th colspan="4">Temperature</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Average</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>Temperature (&#8457;)</td>
      <td>$hTemp</td>
      <td>$aTemp</td>
      <td>$lTemp</td>
    </tr>
    <tr>
      <td>Dewpoint (&#8457;)</td>
      <td>$hDewPnt</td>
      <td>$aDewPnt</td>
      <td>$lDewPnt</td>
    </tr>
    <tr>
      <td>Humidity (%)</td>
      <td>$hHum</td>
      <td>$aHum</td>
      <td>$lHum</td>
    </tr>
    <tr>
      <td>Feels Like (&#8457;)</td>
      <td>$hFeels</td>
      <td>$aFeels</td>
      <td>$lFeels</td>
    </tr>
    <tr>
      <td>Apparent Temperature (&#8457;)</td>
      <td>$hAppTemp</td>
      <td>$aAppTemp</td>
      <td>$lAppTemp</td>
    </tr>
    <tr>
      <td>Heat Index (&#8457;)</td>
      <td>$hHeatInd</td>
      <td>$aHeatInd</td>
      <td>$lHeatInd</td>
    </tr>
    <tr>
      <td>Wind Chill (&#8457;)</td>
      <td>$hWndChl</td>
      <td>$aWndChl</td>
      <td>$lWndChl</td>
    </tr>
  </table>
  <br>
  <table class="tablestyle">
    <th colspan="4">Wind & Pressure</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Average</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>Pressure (inHg)</td>
      <td>$mxPress</td>
      <td>$aPress</td>
      <td>$mnPress</td>
    </tr>
    <tr>
      <td>Wind Speed (mph)</td>
      <td>$hWind</td>
      <td>$aWind</td>
      <td>$lWind</td>
    </tr>
    <tr>
      <td>Wind Gust (mph)</td>
      <td>$hWndGst</td>
      <td>$aWndGst</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Wind Direction</td>
      <td>-</td>
      <td>$aWndDir</td>
      <td>-</td>
    </tr>
  </table>
  <br>
  <table class="tablestyle">
    <th colspan="4">Rain & Evaporation</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Total</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>Rainfall (in)</td>
      <td>-</td>
      <td>$totRain</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Rain Rate (in/Hr)</td>
      <td>$rainRate</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Evapotranspiration (in)</td>
      <td>-</td>
      <td>$evapoTrans</td>
      <td>-</td>
    </tr>
  </table>
  <br>
  <table class="tablestyle">
    <th colspan="4">Solar</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Average</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>UV Index</td>
      <td>$hUV</td>
      <td>$aUV</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Solar Radiation (W/m&sup2;)</td>
      <td>$hSolRad</td>
      <td>$aSolRad</td>
      <td>-</td</tr>
  </table>
</table>
<table style="float:left;">
  <table class="tablestyle">
    <th colspan="4">Temperature</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Average</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>Temperature (&#8457;)</td>
      <td>$hTemp</td>
      <td>$aTemp</td>
      <td>$lTemp</td>
    </tr>
    <tr>
      <td>Dewpoint (&#8457;)</td>
      <td>$hDewPnt</td>
      <td>$aDewPnt</td>
      <td>$lDewPnt</td>
    </tr>
    <tr>
      <td>Humidity (%)</td>
      <td>$hHum</td>
      <td>$aHum</td>
      <td>$lHum</td>
    </tr>
    <tr>
      <td>Feels Like (&#8457;)</td>
      <td>$hFeels</td>
      <td>$aFeels</td>
      <td>$lFeels</td>
    </tr>
    <tr>
      <td>Apparent Temperature (&#8457;)</td>
      <td>$hAppTemp</td>
      <td>$aAppTemp</td>
      <td>$lAppTemp</td>
    </tr>
    <tr>
      <td>Heat Index (&#8457;)</td>
      <td>$hHeatInd</td>
      <td>$aHeatInd</td>
      <td>$lHeatInd</td>
    </tr>
    <tr>
      <td>Wind Chill (&#8457;)</td>
      <td>$hWndChl</td>
      <td>$aWndChl</td>
      <td>$lWndChl</td>
    </tr>
  </table>
  <br>
  <table class="tablestyle">
    <th colspan="4">Wind & Pressure</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Average</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>Pressure (inHg)</td>
      <td>$mxPress</td>
      <td>$aPress</td>
      <td>$mnPress</td>
    </tr>
    <tr>
      <td>Wind Speed (mph)</td>
      <td>$hWind</td>
      <td>$aWind</td>
      <td>$lWind</td>
    </tr>
    <tr>
      <td>Wind Gust (mph)</td>
      <td>$hWndGst</td>
      <td>$aWndGst</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Wind Direction</td>
      <td>-</td>
      <td>$aWndDir</td>
      <td>-</td>
    </tr>
  </table>
  <br>
  <table class="tablestyle">
    <th colspan="4">Rain & Evaporation</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Total</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>Rainfall (in)</td>
      <td>-</td>
      <td>$totRain</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Rain Rate (in/Hr)</td>
      <td>$rainRate</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Evapotranspiration (in)</td>
      <td>-</td>
      <td>$evapoTrans</td>
      <td>-</td>
    </tr>
  </table>
  <br>
  <table class="tablestyle">
    <th colspan="4">Solar</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Average</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>UV Index</td>
      <td>$hUV</td>
      <td>$aUV</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Solar Radiation (W/m&sup2;)</td>
      <td>$hSolRad</td>
      <td>$aSolRad</td>
      <td>-</td</tr>
  </table>
</table>
<table style="float:left;">
  <table class="tablestyle">
    <th colspan="4">Temperature</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Average</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>Temperature (&#8457;)</td>
      <td>$hTemp</td>
      <td>$aTemp</td>
      <td>$lTemp</td>
    </tr>
    <tr>
      <td>Dewpoint (&#8457;)</td>
      <td>$hDewPnt</td>
      <td>$aDewPnt</td>
      <td>$lDewPnt</td>
    </tr>
    <tr>
      <td>Humidity (%)</td>
      <td>$hHum</td>
      <td>$aHum</td>
      <td>$lHum</td>
    </tr>
    <tr>
      <td>Feels Like (&#8457;)</td>
      <td>$hFeels</td>
      <td>$aFeels</td>
      <td>$lFeels</td>
    </tr>
    <tr>
      <td>Apparent Temperature (&#8457;)</td>
      <td>$hAppTemp</td>
      <td>$aAppTemp</td>
      <td>$lAppTemp</td>
    </tr>
    <tr>
      <td>Heat Index (&#8457;)</td>
      <td>$hHeatInd</td>
      <td>$aHeatInd</td>
      <td>$lHeatInd</td>
    </tr>
    <tr>
      <td>Wind Chill (&#8457;)</td>
      <td>$hWndChl</td>
      <td>$aWndChl</td>
      <td>$lWndChl</td>
    </tr>
  </table>
  <br>
  <table class="tablestyle">
    <th colspan="4">Wind & Pressure</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Average</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>Pressure (inHg)</td>
      <td>$mxPress</td>
      <td>$aPress</td>
      <td>$mnPress</td>
    </tr>
    <tr>
      <td>Wind Speed (mph)</td>
      <td>$hWind</td>
      <td>$aWind</td>
      <td>$lWind</td>
    </tr>
    <tr>
      <td>Wind Gust (mph)</td>
      <td>$hWndGst</td>
      <td>$aWndGst</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Wind Direction</td>
      <td>-</td>
      <td>$aWndDir</td>
      <td>-</td>
    </tr>
  </table>
  <br>
  <table class="tablestyle">
    <th colspan="4">Rain & Evaporation</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Total</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>Rainfall (in)</td>
      <td>-</td>
      <td>$totRain</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Rain Rate (in/Hr)</td>
      <td>$rainRate</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Evapotranspiration (in)</td>
      <td>-</td>
      <td>$evapoTrans</td>
      <td>-</td>
    </tr>
  </table>
  <br>
  <table class="tablestyle">
    <th colspan="4">Solar</th>
    <col span="1" class="wide">
    <tr>
      <th col span="1" class="thin"></th>
      <th col span="1" class="thin">Maximum</th>
      <th col span="1" class="thin">Average</th>
      <th col span="1" class="thin">Minimum</th>
    </tr>
    <tr>
      <td>UV Index</td>
      <td>$hUV</td>
      <td>$aUV</td>
      <td>-</td>
    </tr>
    <tr>
      <td>Solar Radiation (W/m&sup2;)</td>
      <td>$hSolRad</td>
      <td>$aSolRad</td>
      <td>-</td</tr>
  </table>
</table>
<br>
<br>
<br>
<b>Definitions:</b><br>
<br>
<u>Feels Like</u>: attempts to quantify what human skin detects as the temperature, taking into account any warming or cooling effect of exposure to different humidity levels, high wind, or shade/sunshine.<br>
<u>Apparent Temperature</u>: the general term for the perceived outdoor temperature, caused by the combined effects of air temperature, relative humidity and wind speed.<br>
<u>Heat Index</u>: an index that combines air temperature and relative humidity in an attempt to determine the human-perceived equivalent temperature - how hot it feels.<br>
<u>Wind Chill</u>: takes into account how the speed of the wind affects our perception of the air temperature. The faster the wind blows, the faster heat from our bodies is carried away and the colder the environment feels.<br>
<u>Evapotranspiration</u>: the process by which water is transferred from the land to the atmosphere by evaporation from the soil and other surfaces and by transpiration from plants.<br>
<u>UV Index</u>: a measure of the intensity of ultraviolet radiation from the sun at the sun's highest point on a particular day in a particular place.<br>
<u>Solar Radiaton</u>: energy radiated from the sun in the form of electromagnetic waves, including visible and ultraviolet light and infrared radiation.<br>

标签： htmlcss

解决方案

将表格后面的所有内容包装在 div 中，然后

<div style="clear: both;">

推荐阅读