javascript - 如何将边框半径应用于具有水平滚动的分隔表行?
问题描述
我有一个包含大量数据的表格,因此必须水平滚动。我已经设计了将每一行分隔为每张单独卡片的表格,但我无法正确获得表格行左右部分的边框半径。如果我滚动到右侧的尽头,那么我可以看到右侧的半径和左侧的半径相同。当您在中间时,您看不到任何边界半径。
PS:当有水平滚动时,将半径应用于第一个和最后一个 td 不起作用。:(
有什么技巧可以解决这个问题,所以边界半径的两侧一直可见吗?我对桌面没有太多想法,因为它确实需要有限的属性。或者我们可能需要 javascript 来获得所需的输出?
.page-wrapper {
background-color: #f1f2f5;
}
table {
white-space: nowrap;
border-collapse: separate;
border-spacing: 0 10px;
}
.table {
position: relative;
border-collapse: separate;
border-spacing: 0 10px;
}
.table td,
.table th,
.table tr,
.table thead,
.table tbody {
border: none;
position: relative;
}
.table thead th {
border: none;
padding-top: 0;
padding-bottom: 0;
}
tbody {
position: relative;
}
tbody tr {
border-radius: 8px;
margin-bottom: 20px;
position: relative;
}
tbody tr::after {
content: '';
width: 100%;
position: absolute;
left: 0;
right: 0;
background-color: #fff;
height: 48px;
z-index: 0;
border-radius: 8px;
}
tbody td {
z-index: 1;
}
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="page-wrapper">
<div class="container pt-3">
<div class="table-responsive">
<table class="table no-wrap" style="
position: relative;
">
<thead>
<tr>
<th>SN</th>
<th>Description 1</th>
<th>Description 2</th>
<th>Description 3</th>
<th>Description 4</th>
<th>Description 5</th>
<th>Description 6</th>
<th>Description 7</th>
<th>Description 8</th>
<th>Description 9</th>
<th>Description 10</th>
<th>Container</th>
<th>Pickup Date</th>
<th>Return Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
<tr>
<td>1</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>This Area is for text description</td>
<td>UKS127398SLA</td>
<td>2020-12-12</td>
<td>2020-12-12</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
解决方案
position:sticky
这是一个似乎只在 Chrome 上运行良好的技巧(用 firefox 检查)。
tbody tr::after,
tbody tr::before {
content: '';
display: block;
position: sticky;
right: 0; /* one will stick to the right */
left: 0; /* the other to the left */
box-shadow:30px 0 0 6px #f1f2f5; /* a box-shadow to hide the outside */
height: 48px;
margin-left: -50px; /* big enough for the radius you will be using */
z-index: 9;
border-radius: 0 30px 30px 0; /* your radius */
}
tbody tr::before {
margin-right: -50px;
margin-left:0;
box-shadow:-30px 0 0 6px #f1f2f5;
border-radius: 30px 0 0 30px;
}
thead tr::after,
thead tr::before {
content:"";
display:block;
}
tbody td {
background:#fff;
}
完整代码:
var wrapper = document.querySelector("tbody");
var myHTML = '';
for (var i = 0; i < 5; i++) {
myHTML += '<tr>' +
'<td>1</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>UKS127398SLA</td>' +
'<td>2020-12-12</td>' +
'<td>2020-12-12</td>' +
'</tr>';
}
wrapper.innerHTML = myHTML;
.page-wrapper {
background-color: #f1f2f5;
}
table {
white-space: nowrap;
border-collapse: separate;
border-spacing: 0 10px;
}
.table {
position: relative;
border-collapse: separate;
border-spacing: 0 10px;
}
.table td,
.table th,
.table tr,
.table thead,
.table tbody {
border: none;
position: relative;
}
.table thead th {
border: none;
padding-top: 0;
padding-bottom: 0;
}
tbody {
position: relative;
}
tbody tr {
border-radius: 8px;
margin-bottom: 20px;
position: relative;
}
tbody tr::after,
tbody tr::before {
content: '';
display: block;
position: sticky;
right: 0;
left: 0;
box-shadow:30px 0 0 6px #f1f2f5;
height: 48px;
margin-left: -50px;
z-index: 9;
border-radius: 0 30px 30px 0;
}
tbody tr::before {
margin-right: -50px;
margin-left:0;
box-shadow:-30px 0 0 6px #f1f2f5;
border-radius: 30px 0 0 30px;
}
thead tr::after,
thead tr::before {
content:"";
display:block;
}
tbody td {
background:#fff;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="page-wrapper">
<div class="container pt-3">
<div class="table-responsive">
<table class="table no-wrap" style="
position: relative;
">
<thead>
<tr>
<th>SN</th>
<th>Description 1</th>
<th>Description 2</th>
<th>Description 3</th>
<th>Description 4</th>
<th>Description 5</th>
<th>Description 6</th>
<th>Description 7</th>
<th>Description 8</th>
<th>Description 9</th>
<th>Description 10</th>
<th>Container</th>
<th>Pickup Date</th>
<th>Return Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
另一个想法mask
是在哪里可以有透明度并且可以在 Firefox 上运行
.table-responsive {
mask:
radial-gradient(circle 25px at right,transparent 98%,#fff 100%) 0 41px/27px 59px repeat-y,
radial-gradient(circle 25px at left ,transparent 98%,#fff 100%) 100% 41px/27px 59px repeat-y,
linear-gradient(#fff,#fff);
mask-composite: exclude;
}
完整代码
var wrapper = document.querySelector("tbody");
var myHTML = '';
for (var i = 0; i < 5; i++) {
myHTML += '<tr>' +
'<td>1</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>UKS127398SLA</td>' +
'<td>2020-12-12</td>' +
'<td>2020-12-12</td>' +
'</tr>';
}
wrapper.innerHTML = myHTML;
.page-wrapper {
background-color: #f1f2f5;
}
table {
white-space: nowrap;
border-collapse: separate;
border-spacing: 0 10px;
}
.table {
position: relative;
border-collapse: separate;
border-spacing: 0 10px;
}
.table td,
.table th,
.table tr,
.table thead,
.table tbody {
border: none;
position: relative;
}
.table thead th {
border: none;
padding-top: 0;
padding-bottom: 0;
}
tbody {
position: relative;
}
tbody tr {
border-radius: 8px;
margin-bottom: 20px;
position: relative;
}
tbody td {
background: #fff;
}
.table-responsive {
-webkit-mask: radial-gradient(circle 25px at right, transparent 98%, #fff 100%) 0 41px/27px 59px repeat-y, radial-gradient(circle 25px at left, transparent 98%, #fff 100%) 100% 41px/27px 59px repeat-y, linear-gradient(#fff, #fff);
-webkit-mask-composite: destination-out;
mask: radial-gradient(circle 25px at right, transparent 98%, #fff 100%) 0 41px/27px 59px repeat-y, radial-gradient(circle 25px at left, transparent 98%, #fff 100%) 100% 41px/27px 59px repeat-y, linear-gradient(#fff, #fff);
mask-composite: exclude;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="page-wrapper">
<div class="container pt-3">
<div class="table-responsive">
<table class="table no-wrap" style="
position: relative;
">
<thead>
<tr>
<th>SN</th>
<th>Description 1</th>
<th>Description 2</th>
<th>Description 3</th>
<th>Description 4</th>
<th>Description 5</th>
<th>Description 6</th>
<th>Description 7</th>
<th>Description 8</th>
<th>Description 9</th>
<th>Description 10</th>
<th>Container</th>
<th>Pickup Date</th>
<th>Return Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
要获得任何类型的半径,我们可以用 SVG 替换径向渐变,您可以在其中控制rx/ry
定义半径:
.table-responsive {
mask:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="0" y="0" rx="10" ry="10" width="100" height="49" fill="black"/></svg>') 0 47px/27px 59px repeat-y,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="-50" y="0" rx="10" ry="10" width="77" height="49" fill="black"/></svg>') 100% 47px/27px 59px repeat-y,
linear-gradient(#fff,#fff) center/calc(100% - 27px*2) 100% no-repeat;
}
var wrapper = document.querySelector("tbody");
var myHTML = '';
for (var i = 0; i < 5; i++) {
myHTML += '<tr>' +
'<td>1</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>UKS127398SLA</td>' +
'<td>2020-12-12</td>' +
'<td>2020-12-12</td>' +
'</tr>';
}
wrapper.innerHTML = myHTML;
.page-wrapper {
background-color: #f1f2f5;
}
table {
white-space: nowrap;
border-collapse: separate;
border-spacing: 0 10px;
}
.table {
position: relative;
border-collapse: separate;
border-spacing: 0 10px;
}
.table td,
.table th,
.table tr,
.table thead,
.table tbody {
border: none;
position: relative;
}
.table thead th {
border: none;
padding-top: 0;
padding-bottom: 0;
}
tbody {
position: relative;
}
tbody tr {
border-radius: 8px;
margin-bottom: 20px;
position: relative;
}
tbody td {
background:#fff;
}
.table-responsive {
-webkit-mask:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="0" y="0" rx="15" ry="15" width="100" height="49" fill="black"/></svg>') 0 47px/27px 59px repeat-y,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="-50" y="0" rx="15" ry="15" width="77" height="49" fill="black"/></svg>') 100% 47px/27px 59px repeat-y,
linear-gradient(#fff,#fff) center/calc(100% - 27px*2) 100% no-repeat;
mask:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="0" y="0" rx="15" ry="15" width="100" height="49" fill="black"/></svg>') 0 47px/27px 59px repeat-y,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="-50" y="0" rx="15" ry="15" width="77" height="49" fill="black"/></svg>') 100% 47px/27px 59px repeat-y,
linear-gradient(#fff,#fff) center/calc(100% - 27px*2) 100% no-repeat;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="page-wrapper">
<div class="container pt-3">
<div class="table-responsive">
<table class="table no-wrap" style="
position: relative;
">
<thead>
<tr>
<th>SN</th>
<th>Description 1</th>
<th>Description 2</th>
<th>Description 3</th>
<th>Description 4</th>
<th>Description 5</th>
<th>Description 6</th>
<th>Description 7</th>
<th>Description 8</th>
<th>Description 9</th>
<th>Description 10</th>
<th>Container</th>
<th>Pickup Date</th>
<th>Return Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
最后一个想法(最受支持的一个)是考虑使用与上述 SVG 相同的技术进行叠加。这不会有透明度:
.container > div{
position:relative;
}
.container > div::after {
content:"";
position:absolute;
top:47px;
left:0;
right:0;
bottom:0;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="-10" y="-10" rx="20" ry="20" width="100" height="69" fill="transparent" stroke="%23f1f2f5" stroke-width="20"/></svg>') 0 0,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="-50" y="-10" rx="20" ry="20" width="87" height="69" fill="transparent" stroke="%23f1f2f5" stroke-width="20"/></svg>') 100% 0;
background-size:27px 59px;
background-repeat:repeat-y;
pointer-events:none;
}
完整代码
var wrapper = document.querySelector("tbody");
var myHTML = '';
for (var i = 0; i < 5; i++) {
myHTML += '<tr>' +
'<td>1</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>UKS127398SLA</td>' +
'<td>2020-12-12</td>' +
'<td>2020-12-12</td>' +
'</tr>';
}
wrapper.innerHTML = myHTML;
.page-wrapper {
background-color: #f1f2f5;
}
table {
white-space: nowrap;
border-collapse: separate;
border-spacing: 0 10px;
}
.table {
position: relative;
border-collapse: separate;
border-spacing: 0 10px;
}
.table td,
.table th,
.table tr,
.table thead,
.table tbody {
border: none;
position: relative;
}
.table thead th {
border: none;
padding-top: 0;
padding-bottom: 0;
}
tbody {
position: relative;
}
tbody tr {
border-radius: 8px;
margin-bottom: 20px;
position: relative;
}
tbody td {
background:#fff;
}
.container > div{
position:relative;
}
.container > div::after {
content:"";
position:absolute;
top:47px;
left:0;
right:0;
bottom:0;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="-10" y="-10" rx="20" ry="20" width="100" height="69" fill="transparent" stroke="%23f1f2f5" stroke-width="20"/></svg>') 0 0,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="-50" y="-10" rx="20" ry="20" width="87" height="69" fill="transparent" stroke="%23f1f2f5" stroke-width="20"/></svg>') 100% 0;
background-size:27px 59px;
background-repeat:repeat-y;
pointer-events:none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="page-wrapper">
<div class="container pt-3">
<div>
<div class="table-responsive">
<table class="table no-wrap" style="
position: relative;
">
<thead>
<tr>
<th>SN</th>
<th>Description 1</th>
<th>Description 2</th>
<th>Description 3</th>
<th>Description 4</th>
<th>Description 5</th>
<th>Description 6</th>
<th>Description 7</th>
<th>Description 8</th>
<th>Description 9</th>
<th>Description 10</th>
<th>Container</th>
<th>Pickup Date</th>
<th>Return Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
更新
除了使用最后一种方法的水平滚动之外,还考虑垂直滚动:
var wrapper = document.querySelector("tbody");
var myHTML = '';
for (var i = 0; i < 10; i++) {
myHTML += '<tr>' +
'<td>1</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>This Area is for text description</td>' +
'<td>UKS127398SLA</td>' +
'<td>2020-12-12</td>' +
'<td>2020-12-12</td>' +
'</tr>';
}
wrapper.innerHTML = myHTML;
.page-wrapper {
background-color: #f1f2f5;
}
table {
white-space: nowrap;
border-collapse: separate;
border-spacing: 0 10px;
}
.table {
position: relative;
border-collapse: separate;
border-spacing: 0 10px;
}
.table td,
.table th,
.table tr,
.table thead,
.table tbody {
border: none;
position: relative;
}
.table thead th {
border: none;
padding-top: 0;
padding-bottom: 0;
}
tbody {
position: relative;
}
tbody tr {
border-radius: 8px;
margin-bottom: 20px;
position: relative;
}
tbody td {
background:#fff;
}
.container > div{
position:relative;
display:grid;
grid-template-columns:100% 1fr;
max-height: 400px;
overflow: auto;
}
.container > div > .table-responsive {
grid-row:1;
grid-column:1/span 2;
}
.container > div::after {
content:"";
display:block;
grid-row:1;
grid-column:1;
z-index: 2;
margin-top: 47px;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="-10" y="-10" rx="20" ry="20" width="100" height="69" fill="transparent" stroke="%23f1f2f5" stroke-width="20"/></svg>') 0 0,
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 27 59"><rect x="-50" y="-10" rx="20" ry="20" width="87" height="69" fill="transparent" stroke="%23f1f2f5" stroke-width="20"/></svg>') 100% 0;
background-size:27px 59px;
background-repeat:repeat-y;
pointer-events:none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="page-wrapper">
<div class="container pt-3">
<div>
<div class="table-responsive">
<table class="table no-wrap" style="
position: relative;
">
<thead>
<tr>
<th>SN</th>
<th>Description 1</th>
<th>Description 2</th>
<th>Description 3</th>
<th>Description 4</th>
<th>Description 5</th>
<th>Description 6</th>
<th>Description 7</th>
<th>Description 8</th>
<th>Description 9</th>
<th>Description 10</th>
<th>Container</th>
<th>Pickup Date</th>
<th>Return Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
推荐阅读
- java - 动态图像未显示在 Html Img 标签中
- javascript - 将返回数据放入解析函数
- html - iFrame 中的 YouTube 视频仅在本地可见
- azure-data-factory-2 - c#使用数据工厂使用Where子句过滤器将SQL表数据复制到另一个数据库
- javascript - 在 div 中的页面上显示 HREF 链接
- django - 从变量中删除大括号
- node.js - Node.js - Joi 架构:检查 req.value 和 ip 不工作
- wordpress - Magento中的Wordpress家庭地址给出404错误
- terminal - 使用 grep 搜索只有部分的整个单词/短语
- sql - 在临时表中使用变量 - SQL Server