HTML 表格的問題

html table

HAHZOZO 2020-08-21 14:07:26 ‧ 1415 瀏覽

分享至

不好意思來這邊打擾大家
我這邊遇到個問題

第一章圖片是畫面寬度1920時的狀態

想要讓畫面寬度小於1920時
將規格移動到品名的下方

類似這樣

請問有什麼方法能呈現嗎?
謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

listennn08

iT邦高手 5 級 ‧ 2020-08-21 14:37:15

最佳解答

簡單寫個範例
codepen 1920 顯示不太出來在自己改 max-width

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>no</th>
            <th>name
                <div class="low-screen">unit</div>
            </th>
            <th>price</th>
            <th>num</th>
            <th class="lg-screen">unit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0
                <div class="low-screen">0</div>
            </td>
            <td>0</td>
            <td>0</td>
            <td class="lg-screen">0</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1
                <div class="low-screen">1</div>
            </td>
            <td>1</td>
            <td>1</td>
            <td class="lg-screen">1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2
                <div class="low-screen">2</div>
            </td>
            <td>2</td>
            <td>2</td>
            <td class="lg-screen">2</td>
        </tr>
    </tbody>
</table>

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  width: 100%;
  text-align: center;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

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

.low-screen {
  display: none;
}

@media screen and (max-width: 720px) {
  .low-screen {
    display: block;
  }
  .lg-screen {
    display: none;
  }
}

demo