I am working to add a html meter to a statics. It is the mean and three standard deviations. I want the numbers to show up at the top of the row and meter to show up underneath.
This is what it looks like now

我正在努力增加一个静态的html计量器。它是平均值和三个标准差。我希望数字显示在排的顶部，计价器显示在下面。这就是它现在的样子

I want to add a row that spans multiple columns. I am using html and css, the css is for responsiveness. It is the basic rwd table with some design tweaks. This is what I want it to look like

我想添加一个跨越多列的行。我使用的是html和css，css是为了响应。这是基本的RWD表，经过一些设计调整。这就是我想要的样子

This is my code

这是我的代码

<table class="rwd-table">
  <colgroup span="1"></colgroup>
  <tr>
    <th scope="col">Tickers</th>
    <th scope="col">Price</th>
    <th scope="col">Prev Close</th>
    <th scope="col">Open</th>
    <th scope="col">Low</th>
    <th scope="col">High</th>
    <th scope="col">Swing Factor</th>
    <th scope="col">Alpha Swing values</th>
    <th scope="col">Lowest</th>
    <th scope="col">Mean</th>
    <th scope="col">Highest</th>
  </tr>
  <tr>
    <th data-th="Tickers" >DIA</th>
    <td data-th="Price">50,000</td>
    <td data-th="Prev Close">30,000</td>
    <td data-th="Open">100,000</td>
    <td data-th="Low">80,000</td>
    <td data-th="High">80,000</td>
    <td data-th="Swing Factor">80,000</td>
    <td data-th="Alpha Swing values">80,000</td>
    <td data-th="Lowest">80,000</td>
    <td data-th="Mean">80,000</td>
    <td data-th="Highest">80,000</td>
    
        
  </tr>
  <tr>
    <th scope="row">SPY</th>
    <td data-th="Price">50,000</td>
    <td data-th="Prev Close">30,000</td>
    <td data-th="Open">100,000</td>
    <td data-th="Low">80,000</td>
    <td data-th="High">80,000</td>
    <td data-th="Swing Factor">80,000</td>
    <td data-th="Alpha Swing values">80,000</td>
    <td data-th="Lowest">80,000</td>
    <td data-th="Mean">80,000</td>
    <td data-th="Highest">80,000</td>
  </tr>
  <tr>
    <th data-th="Tickers" scope="row">Volatility</th>
  </tr>
  <tr>
    <th data-th="Tickers" scope="row">VIXM</th>
    <td data-th="Price">50,000</td>
    <td data-th="Prev Close">30,000</td>
    <td data-th="Open">100,000</td>
    <td data-th="Low">80,000</td>
    <td data-th="High">80,000</td>
    <td data-th="Swing Factor">80,000</td>
    <td data-th="Alpha Swing values">80,000</td>
    <td data-th="Lowest">80,000</td>
    <td data-th="Mean">80,000</td>
    <td data-th="Highest">80,000</td>
  </tr>
  <tr>
    <th data-th="Tickers" scope="row">VIXY</th>
    <td data-th="Price">50,000</td>
    <td data-th="Prev Close">30,000</td>
    <td data-th="Open">100,000</td>
    <td data-th="Low">80,000</td>
    <td data-th="High">80,000</td>
    <td data-th="Swing Factor">80,000</td>
    <td data-th="Alpha Swing values">80,000</td>
    <td data-th="Lowest">80,000</td>
    <td data-th="Mean">80,000</td>
    <td data-th="Highest">80,000</td>
  </tr>
</table>

<p>&larr; Drag the window (in the editor or full page view) to see the effect. &rarr;</p>

I want to add a row within a row that spans multiple columns

我想在跨越多个列的行内添加一行

You can’t do this within a single row. You’ll need to add an extra row for each meter. However, you should be able to style it so that to a user, each pair of rows appear to be a single row.

您不能在单行中完成此操作。您需要为每个米添加额外的一行。但是，您应该能够设置它的样式，以便对用户而言，每一对行看起来都是单行。

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 5px 10px;
}
th {
  background: navy;
  color: white;
}
.row-data td {
  border-bottom: 0;
  padding-top: 1em;
}
.row-meter td {
  border-top: 0;
}
.meter {
  padding: 0;
}
.meter>div {
  border: 3px solid red;
  height: 1em;
  box-sizing: border-box;
}
.shaded {
  background: aliceblue;
}

<table>
  <tr>
    <th>col 1</th>
    <th>col 2</th>
    <th>col 3</th>
    <th>col 4</th>
    <th>col 5</th>
    <th>col 6</th>
  </tr>
  <tr class="row-data">
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
  </tr>
  <tr class="row-meter">
    <td></td>
    <td></td>
    <td></td>
    <td class="meter" colspan="3">
      <div></div>
    </td>
  </tr>
  <tr class="row-data shaded">
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
  </tr>
  <tr class="row-meter shaded">
    <td></td>
    <td></td>
    <td></td>
    <td class="meter" colspan="3">
      <div></div>
    </td>
  </tr>