滑動table怎麼把點移上去

boottrap css

神威 2021-03-15 13:15:05 ‧ 1468 瀏覽

分享至

大家好，上次友邦有介紹可滑動table，我試著寫一個
參考:https://codepen.io/frise/pen/kXRQGx
但我想把點移到上面卻不知道哪裡可以移
還有我在範例上看，他左右鍵是消失的，但移到我的頁面，左右鍵又出現了....
我已經prevNextButtons: false,

<!DOCTYPE html>
<html lang="en">
<head> 
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/i18n/jquery.ui.datepicker-zh-TW.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker/mdtimepicker.css">
	<script src="https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker/mdtimepicker.js"></script>	
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  	<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
 	  
	<script>
  var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
  // options
  freeScroll: false,
  contain: true,
  prevNextButtons: false,
  groupCells: true,
  cellAlign: 'left'
});
</script>
</head>
<style>
 

/*table */
.table-head {
  float: left;
  width: 80px;
  border-right: 2px solid #333;
  border-collapse: collapse
}

.table-scroll {
  float: left;
  width: calc(100% - 81px);
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  //background-color: #AAA;
}

.table-scroll table {
 // margin-top: -1px;
 // width: 30%;
//  min-width: 300px;
 // max-width: 40%;
  border-collapse: collapse;
}

th {
  text-align: left;
  background-color: #f2f2f2;
  color: #0076BF;
}

th, td {
  padding: 10px;
  border: 1px solid #333;
  background-clip: padding-box;
}

td {
  background-color: #fff;
} 
		</style>
<body> 
 
	 
<div class="table-scroll carousel"  data-flickity="" data-js="carousel">
 
  <table class="carousel-cell">
    <th>Title3</th>
    <tr>
      <td>31</td>
    </tr>
    <tr>
      <td>32</td>
    </tr>
    <tr>
      <td>33</td>
    </tr>
    <tr>
      <td>34</td>
    </tr>
  </table>
  <table class="carousel-cell">
    <th>Title4</th>
    <tr>
      <td>41</td>
    </tr>
    <tr>
      <td>42</td>
    </tr>
    <tr>
      <td>43</td>
    </tr>
    <tr>
      <td>44</td>
    </tr>
  </table>
</div>
  
</body>
</html>

謝謝大家

archer9080 iT邦研究生 4 級 ‧ 2021-03-15 17:11:44 檢舉

>cellAlign: 'left'
但你的還在中間
檢查一下你的js
基本上option應該都沒起做用
附上參數說明
https://github.com/metafizzy/flickity

登入發表討論

直播研討會

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

直播中

2 個回答

純真的人

iT邦大師 1 級 ‧ 2021-03-15 15:43:33

最佳解答

我看F12直接改的~你參考看看
另外加上強制隱藏左右~

.table-head{margin-top:25px}
.table-scroll{margin-top:25px}
.flickity-page-dots{top:-25px}
.flickity-prev-next-button{display:none;}

F12下的畫面HTML檢查

回應 3
分享
檢舉

神威 iT邦研究生 4 級 ‧ 2021-03-15 16:31:19 檢舉

純真的人好:謝謝您的回達，不過我加入.flickity-page-dots{top:-25px}就不能手動滑動了，只能按點點來移動左右...

純真的人 iT邦大師 1 級 ‧ 2021-03-15 16:44:53 檢舉

那是因為.flickity-page-dots裡面有設定position: absolute;相對高度~蓋住下面的關係~

所以加上高度設定~就可以滑動了~

.table-head{margin-top:25px;}
.table-scroll{margin-top:25px;}
.flickity-page-dots{top:-25px;height:30px}
.flickity-prev-next-button{display:none;}

神威 iT邦研究生 4 級 ‧ 2021-03-15 17:00:16 檢舉

謝謝

登入發表回應

Homura

iT邦高手 1 級 ‧ 2021-03-15 15:00:18

我好像沒看到設定能調位置
研究一下加上這段會變在上面

.flickity-page-dots{
  top:-25px;
}

回應 1
分享
檢舉

神威 iT邦研究生 4 級 ‧ 2021-03-15 17:01:13 檢舉

謝謝大大的解答，不過純真的人說的比較詳細，最佳解就給他了

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙