Making `td`s span throughout the whole row

Question

I'm having troubles spanning the td throughout the whole tr that they are inside, but i can't get it to work properly. Here is the screenshot: screenshot

There was already a question with the rows, but this time tds are giving problems.

<div className="jumbotron col-sm-12 text-left row">
                    <div className="panel panel-info">
                        <div className="panel-heading">
                            HEADER
                        </div>
                    </div>

                    <table
                        id="templateTable"
                        className="table table-bordered table-condensed table-responsive">
                        <tbody className="row">
                            <tr className="col-sm-6">
                                <td className="col-sm-12">
                                    {"Hello1"}
                                </td>
                            </tr>
                            <tr className="col-sm-6">
                                <td className="col-sm-12">
                                    {"Hello2"}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

Answer 1

Set the colspan attribute of the td element that you want to span across the entire table:

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
    <!-- notice this td spans multiple columns -->
  </tr>
</table>

Basically you just need to set colspan equal to the number of columns in your table to take the entire width of the table.

https://www.w3schools.com/tags/att_td_colspan.asp