我有一个包含大量数据的表，因此必须水平滚动。 我设计了将每一行分隔为每张单独卡片的表格，但我无法正确获得表格行左右部分的边框半径。如果我滚动到右端，那么我可以看到右侧的半径和左侧的半径相同。当您位于中间时，您看不到任何边界半径。
PS：当存在水平滚动时，将半径应用于第一个和最后一个 td 不起作用。 :(
有没有什么技巧可以解决这个问题，使边界半径的两侧始终可见？我对桌子没有太多了解，因为它的属性确实有限。或者也许我们需要 javascript 来获得所需的输出？
I am looking it to be like this on the image below,
.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>UPDATE
使用最后一种方法除了水平滚动之外还考虑垂直滚动：
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>