iT邦幫忙

0

HTML 表格的問題

不好意思來這邊打擾大家
我這邊遇到個問題
https://ithelp.ithome.com.tw/upload/images/20200821/20115224LFKS1xOnn7.png
第一章圖片是畫面寬度1920時的狀態

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

類似這樣
https://ithelp.ithome.com.tw/upload/images/20200821/20115224ybdey49LQm.png

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

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

3
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

HAHZOZO iT邦新手 5 級 ‧ 2020-08-21 15:55:49 檢舉

成功 謝謝拉

我要發表回答

立即登入回答