<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue and Bootstrap Table</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.scrollable-table-container {
overflow-y: auto;
max-height: 300px;
}
.table-fixed {
width: 100%;
table-layout: fixed;
/* border-collapse: collapse;
margin-bottom: 0; */
border-collapse: separate; /* 使得单元格之间可以有空隙 */
/* 设置单元格之间的垂直间距为 10px */
/* border-spacing: 0 10px; */
}
.table-fixed thead th {
position: sticky;
top: 0;
background-color: #fff;
z-index: 1;
}
.table-fixed th, .table-fixed td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
/* Ensure the content wraps */
/* word-wrap: break-word; */
white-space: nowrap; /* 保证内容不换行 */
}
.table-fixed tbody td {
overflow-x: auto; /* Allows scrolling inside cells */
white-space: nowrap;
}
/* 封装内容，隐藏滚动条 */
.scrollable-cell {
overflow-x: auto; /* 允许横向滚动 */
white-space: nowrap;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.scrollable-cell::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
/* 新增样式来确保内容之间有足够的空间 */
.table-fixed tbody td {
margin-right: 5px; /* 在单元格之间添加额外的右边距 */
margin-left: 5px;
}
</style>
</head>
<body>
<div id="app" class="container">
<div class="scrollable-table-container">
<table class="table table-fixed">
<thead>
<tr>
<th>Name</th>
<th>Name2</th>
<th>Email</th>
<th>Description</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td class="scrollable-cell">{{ item.name2 }}</td>
<td class="scrollable-cell">{{ item.name }}</td>
<td class="scrollable-cell">{{ item.email }}</td>
<td class="scrollable-cell">{{ item.description }}</td>
<td class="scrollable-cell">{{ item.operation }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 引入Vue JS -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Bootstrap的JS库 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
items: [
// 添加10条示例数据
{ id: 1, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--', name: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--', email: 'john@e--aaaaaaaaaaaaa-------------xample.com', description: 'Description 1', operation: 'Edit----------------------------' },
{ id: 2, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--',name: 'John-', email: 'john@example---aaaaaaaaaaaaaa---.com', description: 'Description 1', operation: 'Edit-----------------------------' },
{ id: 3, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--',name: 'Joh', email: 'john@e---------aaaaaaaaaaaaaaa-----xample.com', description: 'Descriptio---------- 1', operation: 'Edit---------------' },
{ id: 4, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--',name: 'Jo', email: 'john@example.com', description: 'Description 1', operation: 'Edi---------------------' },
{ id: 5, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--',name: 'Johnaaaaaaaaaaaaaaaaaa Doe-----------', email: 'john@example.com', description: 'Description 1', operation: 'Edit-----------------' },
{ id: 6, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--',name: 'John-', email: 'john@example--aaaaaaaaaaaaa----.com', description: 'Descffffffffffffffffffffffffffffffffffffription 1', operation: 'Edi----------------t' },
{ id: 7, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--',name: 'Joh', email: 'john@exa-----aaaaaaaaaaaaaaaaaaaaa--------mple.com', description: 'Descriptio---------- 1', operation: 'Ed-------------it' },
{ id: 8, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--',name: 'Jo', email: 'john@exa-------------mple.com', description: 'Description 1', operation: 'Edi---------------------' },
{ id: 9, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--',name: 'sssssssgJffffffffohn Doe', email: 'john@exffffffffffffffffffffffffffffffffffffffample.com', description: 'Description 1', operation: 'Edit' },
{ id: 10, name2: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--',name: '111111111111John Doe', email: 'john@exa5555ffffffffffffffffffffffffffffffffffff5555mple.com', description: 'Descr444455iption 1', operation: 'Edit' },
]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表头固定，tbody滚动，且对齐，可换行</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.table-wrapper {
overflow-y: auto;
max-height: 400px;
}
.table-fixed {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.table-fixed thead th {
position: sticky;
top: 0;
background-color: #fff;
z-index: 1;
}
.table-fixed th, .table-fixed td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
word-wrap: break-word; /* Ensure the content wraps */
}
</style>
</head>
<body>
<div id="app" class="container">
<div class="table-wrapper">
<table class="table table-fixed">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Description</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.description }}</td>
<td>{{ item.operation }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 引入Vue JS -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Bootstrap的JS库 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
items: [
// 添加10条示例数据
{ id: 1, name: 'John Doe---------aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa--', email: 'john@e--aaaaaaaaaaaaa-------------xample.com', description: 'Description 1', operation: 'Edit----------------------------' },
{ id: 2, name: 'John-', email: 'john@example---aaaaaaaaaaaaaa---.com', description: 'Description 1', operation: 'Edit-----------------------------' },
{ id: 3, name: 'Joh', email: 'john@e---------aaaaaaaaaaaaaaa-----xample.com', description: 'Descriptio---------- 1', operation: 'Edit---------------' },
{ id: 4, name: 'Jo', email: 'john@example.com', description: 'Description 1', operation: 'Edi---------------------' },
{ id: 5, name: 'Johnaaaaaaaaaaaaaaaaaa Doe-----------', email: 'john@example.com', description: 'Description 1', operation: 'Edit-----------------' },
{ id: 6, name: 'John-', email: 'john@example--aaaaaaaaaaaaa----.com', description: 'Descffffffffffffffffffffffffffffffffffffription 1', operation: 'Edi----------------t' },
{ id: 7, name: 'Joh', email: 'john@exa-----aaaaaaaaaaaaaaaaaaaaa--------mple.com', description: 'Descriptio---------- 1', operation: 'Ed-------------it' },
{ id: 8, name: 'Jo', email: 'john@exa-------------mple.com', description: 'Description 1', operation: 'Edi---------------------' },
{ id: 9, name: 'sssssssgJffffffffohn Doe', email: 'john@exffffffffffffffffffffffffffffffffffffffample.com', description: 'Description 1', operation: 'Edit' },
{ id: 10, name: '111111111111John Doe', email: 'john@exa5555ffffffffffffffffffffffffffffffffffff5555mple.com', description: 'Descr444455iption 1', operation: 'Edit' },
]
}
});
</script>
</body>
</html>
