Add single row in multiple columns html

September 11, 2023

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

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

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

>Solution :

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, the 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>