小编Rab*_*sht的帖子

Bootstrap中的水平和垂直滚动表

我正在使用bootstrap设计一个表,响应一个.直到它少了没有.列,这很好.使用固定标头,它工作正常.

JSFIDDLE VERTICAL SCROLLBAR

现在,我在表格中需要超过20列,它也应该是水平滚动的.

JSFIDDLE HORIZONTAL SCROLLBAR

我试图使它们一起工作,用于垂直滚动的固定标题表和具有可滚动标题的水平滚动.

我试过这个:

.table-fixed thead {
  width: 97%;
}

.table-fixed tbody {
  height: 150px;
  overflow-y: auto;
  width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
  display: block;
}

.table-fixed tbody td,
.table-fixed thead>tr>th {
  float: left;
  border-bottom-width: 0;
}

.table-fixed thead {
  width: 97%;
}

.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
  display: block; …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery twitter-bootstrap

7
推荐指数
1
解决办法
1万
查看次数

使用固定标题使引导表可以垂直和水平滚动

如何使固定标题使引导表垂直和水平滚动?

我有一个解决方案,但有一些限制,如:

  • th和td的宽度将是固定的
  • 桌子的高度将是固定的

解决方案就在这里:JSFIDDLE

我正在尝试使用这些属性创建表:

  • 响应性(高度和宽度)
  • td和th的动态宽度
  • 垂直和水平滚动,固定'thead'

有了bootstrap表,我已经完成了这个......

table {
  border: 1px solid black;
  overflow-x: scroll;
  max-height: 350px;
}

td,
th {
  border: 1px solid black;
  width: 1%;
}

.table-fixed thead {
  width: 97%;
}

.table-fixed tbody {
  height: 150px;
  overflow-y: scroll;
  width: 100%;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="">
    <table class="table-fixed table table-responsive">
      <thead>
        <tr>
          <th>#</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Sex</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery html-table twitter-bootstrap

5
推荐指数
2
解决办法
7590
查看次数

表 tr 背景颜色没有改变

我正在尝试选择并突出显示表格中的行和列。我可以选择列,但选择行时出现问题。因为,可以选择行并用某种颜色突出显示,直到在检查col-wise后选择一列。这是片段代码-->

var num_rows;
var num_cols;
var tid = "";
var tabindex = "";
$(document).ready(function() {
    $("#createit").click(function() {
        num_rows = document.getElementById("rows").value;
        num_cols = document.getElementById("cols").value;
        createtable(num_rows, num_cols);
    });
});

function createtable(num_rows, num_cols) {
    var theader = "<table class='editableTable' id='editableTable'>";
    var tbody = "<tbody>";
    var temp = 1;
    for (var i = 1; i <= num_rows; i++) {
        tbody += "<tr id='row_id_" + i + "'>";
        for (var j = 1; j <= num_cols; j++) {
            tbody += "<td id='" + …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery dom html-table

4
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×3

javascript ×3

jquery ×3

html-table ×2

twitter-bootstrap ×2

dom ×1

html ×1