html - 使 `td` 跨越整行

Question

我在将 td 跨越它们所在的整个 tr 时遇到了麻烦，但我无法让它正常工作。这是屏幕截图: screenshot

行已经有问题，但这次 td 出现了问题。

<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

设置要跨越整个表格的 td 元素的 colspan 属性:

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>

基本上，您只需将 colspan 设置为等于表格中的列数即可占用表格的整个宽度。

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