我有下表。

現(xiàn)在，在移動屏幕上，我想將基本列移動到頂部，以適應(yīng)單個屏幕上的所有內(nèi)容。因為它節(jié)省了左側(cè)空間。如下圖

如何做到這一點？

當(dāng)前代碼如下

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #f5f5f5;
}

td.spec {
    font-weight: bold;
}

td.value {
    font-weight: normal;
}

td.spec {
    border-right: 1px solid #ddd;
    padding-right: 10px;
}

td.value {
    border-left: 1px solid #ddd;
    padding-left: 10px;
}

.i-text {
    font-size: 12px !important;
    color: #6a6565 !important;
}

.table-fix-width {
    width: 250px;
    border-left: 1px solid #ddd;
}

th.group-heading {
    text-align: center !important;
    background-color: #5a5a5a !important;
    color: white;
    border-radius: 8px;
}

<section class="table-responsive">
    <table id="myTable" class="table table-sm">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th>
                <div class="ui-widget text-left">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search" />
                </div>
            </th>
            <th>
                <div class="ui-widget">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search2" />
                </div>
               
            </th>
        </tr>
    </thead>
            <tbody>
            <tr>
                <th class="header" rowspan="4">BASIC</th>
                <td class="spec">Capacity</td>
                <td data-label="" class="value">20GB</td>
                <td data-label="" class="value">20GB</td>
            </tr>
             <tr>
                <td class="spec">Name</td>
                <td data-label="" class="value">Product 1</td>
  <td data-label="" class="value">Product 2</td>
            </tr>
                         <tr>
                <td class="spec">Category</td>
                <td data-label="" class="value">TV</td>
         <td data-label="" class="value">TV2</td>
            </tr>
           </tbody>
        </table>
</section>

所以我做了一個快速搜索，結(jié)果是我們不能通過css操作rowspan和colspan屬性。 盡管下面的解決方案適用于您的用例，我還是建議您重新考慮這種布局方法。使用表格進行布局是一種古老的做法，非常麻煩。也許你可以使用flexbox或grid來實現(xiàn)你的目標(biāo)。干杯！

html更改:

<section class="table-responsive">
    <table id="myTable" class="table table-sm">
    <thead>
        <tr>
            <th class='extra--col'></th>
            <th></th>
            <th>
                <div class="ui-widget text-left">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search" />
                </div>
            </th>
            <th>
                <div class="ui-widget">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search2" />
                </div>
               
            </th>
        </tr>
    </thead>
            <tbody>
               <tr>
                <th class="header header--desktop" rowspan='4'>BASIC</th>
                <th class="header header--mobile" colspan='4'>BASIC</th>
              </tr>
            <tr>
<!--                 <th class="header" rowspan="4">BASIC</th> -->
                <td class="spec">Capacity</td>
                <td data-label="" class="value">20GB</td>
                <td data-label="" class="value">20GB</td>
            </tr>
             <tr>
                <td class="spec">Name</td>
                <td data-label="" class="value">Product 1</td>
               <td data-label="" class="value">Product 2</td>
            </tr>
            <tr>
              <td class="spec">Category</td>
              <td data-label="" class="value">TV</td>
              <td data-label="" class="value">TV2</td>
            </tr>
           </tbody>
        </table>
</section>

css:

/* new styles */

.header--mobile{
  display: none;
}

@media only screen and (max-width: 600px) {
  .header--mobile{
    display: table-cell;
  }
  .header--desktop,
  .extra--col{
    display: none;
  }
}

更新:我已經(jīng)根據(jù)修改做了編輯。