我正在使用bootstrap设计一个表,响应一个.直到它少了没有.列,这很好.使用固定标头,它工作正常.
现在,我在表格中需要超过20列,它也应该是水平滚动的.
我试图使它们一起工作,用于垂直滚动的固定标题表和具有可滚动标题的水平滚动.
我试过这个:
.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)如何使固定标题使引导表垂直和水平滚动?
我有一个解决方案,但有一些限制,如:
解决方案就在这里:JSFIDDLE
我正在尝试使用这些属性创建表:
有了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)我正在尝试选择并突出显示表格中的行和列。我可以选择列,但选择行时出现问题。因为,可以选择行并用某种颜色突出显示,直到在检查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)