Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>表格固定左边与顶部</h1>
<div id="calendar1" class="calendar-continer" style="width: 1000px;">
  <div class="calendar-content" style="height:200px;">
    <!--<ul class="calendar-table-left-header">
					<li></li>
					<li>首页文字链接</li>
					<li>首页文字天气</li>
				</ul>-->
    <!--<ul class="calendar-table-top-header">
					<li></li>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
					<li>11</li>
					<li>12</li>
					<li>13</li>
				</ul>-->
    <table class="table table-bordered">
      <thead>
        <tr>
          <th></th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
          <th>7</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
          <th>13</th>
          <th>14</th>
          <th>15</th>
          <th>16</th>
          <th>17</th>
          <th>18</th>
          <th>19</th>
          <th>20</th>
          <th>21</th>
          <th>22</th>
          <th>23</th>
          <th>24</th>
          <th>25</th>
          <th>26</th>
          <th>27</th>
          <th>28</th>
          <th>29</th>
          <th>30</th>
          <th>31</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>首页文字链接1</td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="info-blue"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
        </tr>
        <tr>
          <td>首页文字天气1</td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
        </tr>
        <tr>
          <td>首页文字天气2</td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
        </tr>
        <tr>
          <td>首页文字天气3</td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
        </tr>
        <tr>
          <td>首页文字天气3</td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
        </tr>
        <tr>
          <td>首页文字天气3</td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="checked calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="calendar-check"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="primary"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
          <td class="info"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<h1>表格中嵌套表格</h1>
<table class="table table-bordered table-schedule" id="schedule">
  <tbody class="body-schedule">
    <tr>
      <td width="10%">投放产品名称</td>
      <td colspan="5"></td>
      <td width="40%" class="day-container" rowspan="3">
        <div class="schedule-hidden">
          <div class="day-table" style="width: 2000px;">
            <table class="table table-bordered">
              <caption>2016年11月</caption>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td class="holiday">8</td>
                  <td class="holiday">9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                  <td>31</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                </tr>
              </tbody>
            </table>
            <table class="table table-bordered">
              <caption>2016年12月</caption>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>18</td>
                  <td>19</td>
                  <td>20</td>
                  <td>21</td>
                  <td>22</td>
                  <td>23</td>
                  <td>24</td>
                  <td>25</td>
                  <td>26</td>
                  <td>27</td>
                  <td>28</td>
                  <td>29</td>
                  <td>30</td>
                  <td>31</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                  <td></td>
                  <td>1</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </td>
      <td rowspan="2">刊例价(RBM)</td>
      <td rowspan="2">天数</td>
      <td rowspan="2">刊例总价(RMB)</td>
      <td rowspan="2">备注</td>
      <td rowspan="2">折扣</td>
      <td rowspan="2">总价(RBM)</td>
    </tr>
    <tr>
      <td>APP</td>
      <td>页面</td>
      <td>位置</td>
      <td>格式</td>
      <td>曝光量</td>
      <td>点击量</td>
    </tr>
    <tr>
      <td>查违章</td>
      <td>-</td>
      <td>-</td>
      <td>开屏(可点击,独播)</td>
      <td>5500000</td>
      <td>88000</td>
      <td>720000</td>
      <td>20</td>
      <td>620.6</td>
      <td>提前3个工作日提供素材</td>
      <td>50%</td>
      <td>1000</td>
    </tr>
  </tbody>
  <tfoot class="footer-schedule">
    <tr>
      <td colspan="7"></td>
      <td colspan="5" class="tr">合计:</td>
      <td>62</td>
    </tr>
  </tfoot>
</table>

              
            
!

CSS

              
                .calendar-continer .calendar-header {
  overflow: hidden;
  font-size: 14px;
  padding: 20px 0;
  text-align: center;
}

.calendar-continer .calendar-header .fl {
  /*float: left;*/
}

.calendar-continer .calendar-header .fl ~ .calendar-date {
  /*margin-left: 20%;*/
}

.calendar-continer .calendar-header .calendar-date {
  /*float: left;*/
}

.calendar-continer .calendar-header .calendar-date i {
  cursor: pointer;
}

.calendar-continer .calendar-header .calendar-date i ~ span {
  margin: 0 30px;
}

.calendar-continer .calendar-content {
  width: 100%;
  overflow: scroll;
  height: 450px;
  /*min-height: 150px;*/
  /*height: 450px;*/
  position: relative;
}

.calendar-continer .calendar-content.loading {
  background: url(../img/ajax-loader.gif) no-repeat center;
}

.calendar-continer .calendar-content .primary {
  background: #428bca;
}

.calendar-continer .calendar-content .info {
  background: #777;
}

.calendar-continer .calendar-content .info-blue {
  background: #d9edf7;
}


/*.calendar-continer .calendar-content .table {
	cursor: pointer;
}*/


/*.calendar-continer .calendar-content .calendar-check {
	cursor: pointer;
	padding: 0;
}*/

.calendar-continer .calendar-content .calendar-check {
  position: relative;
  cursor: pointer;
}

.calendar-continer .calendar-content .calendar-check.checked::after {
  position: absolute;
  font-family: 'Glyphicons Halflings';
  content: "\e084";
  color: #d9534f;
  font-size: 30px;
  left: 50%;
  top: 50%;
  margin-top: -20px;
  margin-left: -15px;
}

.calendar-continer .calendar-content .table {
  width: 1500px;
  max-width: none;
  font-size: 12px;
}

.calendar-continer .calendar-content .table th:first-child {
  width: 200px;
}

.calendar-continer .calendar-content .table th {
  width: 40px;
  text-align: center;
}

.calendar-continer .calendar-content .table td:first-child {
  text-align: right;
}

.calendar-continer .calendar-content .table td {
  text-align: center;
  height: 40px;
  vertical-align: middle;
  cursor: pointer;
}

.calendar-continer .calendar-content .table .img-logo {
  width: 30px;
  height: 30px;
}

.calendar-img {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 10;
}

.calendar-img img {
  position: fixed;
  width: 300px;
  left: 50%;
  top: 30%;
  margin-left: -150px;
}

.calendar-label {
  text-align: left;
}

.calendar-label:last-of-type {
  margin: 0;
}

.calendar-label label {
  width: 50px;
  display: inline-block;
  text-align: right;
}

.smart-form .tooltip {
  opacity: 1;
  background: none;
}

.calendar-table-left-header {
  display: none;
  width: 352px;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  text-align: right;
  border: 1px solid #dddddd;
  border-bottom: 0;
  background: #FFF;
  z-index: 1;
  list-style: none;
  /*display: table;*/
}

.calendar-table-left-header li:first-of-type {
  height: 35px;
  border-bottom: 2px solid #dddddd;
  cursor: default;
}


/*.calendar-table-left-header li:last-of-type{
	border-bottom: 0;
}*/

.calendar-table-left-header li {
  height: 40px;
  overflow: visible;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
  padding: 8px;
  line-height: 1.8;
  cursor: pointer;
  /*display: table-cell;
	vertical-align: middle;*/
  /*width: 100%;*/
}

.calendar-table-top-header {
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  text-align: right;
  border: 1px solid #dddddd;
  border-bottom: 0;
  border-right: 0;
  background: #FFF;
  z-index: 2;
  list-style: none;
  overflow: hidden;
}

.calendar-table-top-header li:first-of-type {
  /*width: 208px;*/
  cursor: default;
}

.calendar-table-top-header li {
  /*background: #CCCC77;*/
  /*width: 41px;*/
  /*height: 35px;*/
  overflow: visible;
  border-bottom: 2px solid #dddddd;
  box-sizing: border-box;
  padding: 8px;
  line-height: 1.4;
  float: left;
  text-align: center;
  border-right: 1px solid #dddddd;
}


/**
 * 广告排期审核
 */


/*.table-schedule .header-schedule td,*/

.table-schedule {
  table-layout: fixed;
  word-wrap: break-word;
  word-break: normal;
}

.table-schedule .holiday {
  background: #d43f3a;
  color: #FFF;
  border-right: 0;
  border-left: 0;
}

.table-schedule caption {
  padding: 8px;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  vertical-align: middle;
  box-sizing: border-box;
  line-height: 2;
}

.table-schedule .body-schedule td,
.table-schedule td,
.table-schedule .footer-schedule td {
  text-align: center;
  vertical-align: middle;
  height: 55px;
}

.table-schedule .body-schedule .day-container {
  overflow: hidden;
  padding: 0;
  vertical-align: top;
}

.table-schedule .body-schedule .day-container>div {
  overflow: auto;
}

.table-schedule .body-schedule .day-container .day-table {
  overflow: hidden;
}

.table-schedule .body-schedule .day-container .day-table td {
  height: auto;
}

.table-schedule .body-schedule .day-container .table {
  margin-bottom: 0;
  float: left;
  width: 500px;
  border: 0;
}

.table-schedule .footer-schedule .tr {
  text-align: right;
}

.table-schedule .schedule-hidden {
  height: 0;
  /*position: absolute;
	left:-10000px;*/
  /*opacity: 0;*/
  /*visibility: hidden;*/
}
              
            
!

JS

              
                /**
 * 表格嵌套表格
 */
function renderSchedule($schedule) {
  //每条tr的高度缓存
  var heights = [];
  $schedule.children('tbody').children('tr').each(function() {
    heights.push(this.getBoundingClientRect().height);
  });
  console.log(heights)
  if (heights.length == 0)
    return;
  heights[0] -= 1; //去除下边框
  heights[heights.length - 1] -= 18;//去除滚动条的高度

  var $firstTr = $schedule.find('tr:first'); //第一个tr
  var $dayContainer = $firstTr.find('.day-container');
  var $tables = $dayContainer.find('table'); //td中的内表格
  var width = 0;
  $tables.each(function() {
    var $this = $(this);
    width += this.offsetWidth;
    $this.children('caption').css('height', heights[0]); //如果用height 会将padding也算在内
    $this.find('tr').each(function(index) {
      $(this).height(heights[index + 1]);
    });
  });
  $dayContainer.find('.day-table').width(width);//嵌套表格的外包裹div的宽度,宽度小的话会让表格换行
  $dayContainer.children('div').removeClass('schedule-hidden');
}
renderSchedule($('#schedule'));

/**
 * 固定头部信息
 */
function fixedTopHeader($table) {
  $table.siblings('.calendar-table-top-header').remove();//移除原先的模拟顶部
  var $ul = $('<ul>').addClass('calendar-table-top-header'),
    $ths = $table.find('thead th');
  $ul.width($table.find('thead')[0].offsetWidth + 1);
  $.each($ths, function(key, value) {//遍历th标签,设置li的宽高
    var $th = $(value);
    var $child = $('<li>').css({
      height: $th[0].offsetHeight,
      width: $th[0].offsetWidth
    }).html($th.html());
    $ul.append($child);
  });
  $table.before($ul);
}
/**
 * 固定左边信息
 */
function fixedLeftHeader($table) {
  $table.siblings('.calendar-table-left-header').remove();
  var $ul = $('<ul>').addClass('calendar-table-left-header'),
    $th = $table.find('th:first')[0],
    $li = $('<li>').height($th.offsetHeight),
    $tr = $table.find('tbody tr');
  $ul.width($th.offsetWidth);
  $ul.append($li);
  $.each($tr, function(key, value) {
    var $td = $(value).find('td:first');
    var $child = $('<li>').height($td[0].offsetHeight).attr('data-img', $td.data('img')).html($td.html());
    $ul.append($child);
  });
  $table.before($ul);
}
var $container = $('#calendar1'),
  $table = $container.find('table');
fixedLeftHeader($table); //左边固定
fixedTopHeader($table); //顶部固定
/**
 * 节流
 */
function throttle(fn, delay, context) {
  var curr = +new Date(),
    last_exec = 0,
    timer = null,
    diff,
    args,
    exec = function() {
      last_exec = curr;
      fn.apply(context, args);
    };
  return function() {
    curr = +new Date();
    args = arguments;
    diff = curr - last_exec;
    clearTimeout(timer);
    if (diff >= delay) {
      exec();
    }
    last_call = curr;
  };
}
/**
 * 左右上下滚动事件
 */
$container.find('.calendar-content').scroll(function() {
  var fn = function() {
      var $this = $(this);
      //左右
      var $leftHeader = $container.find('.calendar-table-left-header');
      var $th = $this.find('th:first')[0];
      var width = $th.offsetWidth;
      if (this.scrollLeft > width) {
        $leftHeader.css('left', this.scrollLeft).show();
      } else {
        $leftHeader.hide();
      }
      //上下
      var $topHeader = $container.find('.calendar-table-top-header');
      var height = $th.offsetHeight;
      if (this.scrollTop > height) {
        $topHeader.css('top', this.scrollTop).show();
      } else {
        $topHeader.hide();
      }
    }
    //节流
  var th = throttle(fn, 1000, this);
  th();
});
              
            
!
999px

Console