第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

水平滾動(dòng)表格中的某些列？

水平滾動(dòng)表格中的某些列？

幕布斯7119047 2022-09-16 21:10:26
在表格中，我需要將一列“固定”到位，并使其他列水平滾動(dòng)。下面是一個(gè)可視化示例：我嘗試使用溢出滾動(dòng)，但它似乎什么也不做：.horizontal-scrolling {  display: flex;  width: 500px;  overflow: scroll;}.horizontal-scrolling th {  width: 250px;}<table>    <thead>        <tr>            <th>First</th>            <span class="horizontal-scrolling">                <th>Second</th>                <th>Third</th>                <th>Fourth</th>            </span>        </tr>    <thead></table>
查看完整描述

1 回答

?
神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

我修改了 w3schools 標(biāo)準(zhǔn)表，將一列粘貼到左側(cè)的位置。這種樣式可以通過(guò)javascript應(yīng)用于表格的特定列


table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 1000px;

}


td, th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;

}


tr:nth-child(even) {

  background-color: #dddddd;

}

tr th:nth-of-type(1),/*this is where the table column gets its*/

tr td:nth-of-type(1){/*styling to stick to the left and stay ontop of the rest*/

position:sticky;

left: 0;

z-index: 1;

background: white;

width: 150px

}

div {

width: 600px;

overflow: auto;

}

<body>


<h2>HTML Table</h2>

<div>

<table>

  <tr>

    <th>Company</th>

    <th>Contact</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Alfreds Futterkiste</td>

    <td>Maria Anders</td>

    <td>Germany</td>

  </tr>

  <tr>

    <td>Centro comercial Moctezuma</td>

    <td>Francisco Chang</td>

    <td>Mexico</td>

  </tr>

  <tr>

    <td>Ernst Handel</td>

    <td>Roland Mendel</td>

    <td>Austria</td>

  </tr>

  <tr>

    <td>Island Trading</td>

    <td>Helen Bennett</td>

    <td>UK</td>

  </tr>

  <tr>

    <td>Laughing Bacchus Winecellars</td>

    <td>Yoshi Tannamuri</td>

    <td>Canada</td>

  </tr>

  <tr>

    <td>Magazzini Alimentari Riuniti</td>

    <td>Giovanni Rovelli</td>

    <td>Italy</td>

  </tr>

</table>

</div>

</body>


查看完整回答
反對(duì) 回復(fù) 2022-09-16
  • 1 回答
  • 0 關(guān)注
  • 92 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)