gpt4 book ai didi

html - 如何将水平滚动条放入内部有表格的流体 DIv 中

转载 作者:行者123 更新时间:2023-11-28 08:18:54 28 4
gpt4 key购买 nike

我有一个流动的 div,里面有一个表格,每个 TD 里面有一个正方形,我想在里面放一个水平滚动条。我有几个问题:

  1. 滚动条不显示;
  2. td 类中的元素变得扭曲。
  3. 当我调整窗口浏览器大小时,元素和 div 超出了宽度。

我需要帮助。任何人?这是我的代码。谢谢

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
body {
background: #F0F0F0;
}
.container, .wrap {
position: relative;
max-width: 800px;
margin: 0 auto;
}

#fixed-Left {
width: 30px;
height: auto;
background: #fff;
position: absolute;
top: 0;
left: 0;
}
.filas {
display: block;
font-weight: bold;
font-size: 11px;
color: #333;
}
.filas ul {
margin: 0;
padding: 10px;
list-style: none;
font-size: 12px;
height: auto;
}
.filas ul li {
height: 16px;
font-weight: bold;
list-style: none;
}
#faded-Left {
width: 20px;
height: 100px;
position: absolute;
top: 0;
left: 30px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1 ); /* IE6-8 */
}
#fixed-Right {
width: 30px;
height: auto;
background: #fff;
position: absolute;
top: 0;
right: 0;
}
#faded-Right {
width: 20px;
height: 100px;
position: absolute;
top: 0;
right: 30px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, right top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1 ); /* IE6-8 */
}

.fluid {
height: 340px;
background: #fff;
margin-left: 30px;
width: 740px;
overflow-y: scroll;
overflow-x: hidden;
}

.cadeiras {
width: auto;
height: auto;
padding-top:7px;

}
tr.rowCadeiras{
width:20px;
padding:30px;
}

.imgRelvado {
width: 100%;
height: 40px;
line-height: 40px;
background: #04b46b;
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
}

.seat {
height: 11px !important;
width: 11px !important;
font-size: 9px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: none!important;
cursor: pointer;
}
.seatAvail {
background: #05cd7a;
color: #000;
}
.seatTaken {
background: #dbdbdb;
color: #000;
border: 1px solid #333333;
}
.seatReserv {
background: #858585;
color: #000;
border: 1px solid #5b5b5b;
}
.seatSelect {
background: #f5c226;
color: #000;
border: 1px solid #333333;
}

</style>
</head>
<body>
<div class="wrap">
<div class="imgRelvado">Relvado</div>
<div class="container">
<div id="fixed-Left">
<div class="filas">
<ul>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
</ul>
</div>
</div>
<div id="faded-Left"></div>
<div class="fluid">
<div class="cadeiras">
<table>
<tr class="rowCadeiras">
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
</tr>
<tr class="rowCadeiras">
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
<td class="seat seatAvail"></td>
</tr>
</table>
</div>
</div>
<div id="fixed-Right">
<div class="filas">
<ul>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
</ul>
</div>
</div>
<div id="faded-Right"></div>
</div>
</div>
</body>
</html>

最佳答案

首先将 div 元素添加到您的表格单元格,并将您的 seat 样式应用于它们。固定尺寸设置不适用于表格单元格。

然后像这样调整您的流体样式:

.fluid {
height: 340px;
background: #fff;
width: 100%;
overflow-x: scroll;
box-sizing: border-box;
padding: 0 30px;
}

水平滚动(overflow-x)并为行号添加一些空间(填充)。

Fiddle

编辑:

面板高度随内容增加(Fiddle):

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.left {float: left;}
.right {float: right;}

.clearfix:before,
.clearfix:after{
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}

body {
background: #F0F0F0;
}

.container, .wrap {
position: relative;
max-width: 800px;
margin: 0 auto;
}

.container {
background: #fff;
height: 100%;
}

.numbers {
width: 30px;
}

.fader {
width: 20px;
height: 100%;
position: absolute;
top: 0;
z-index: 100;
}

.fluid, .cadeiras {
height: 100%;
}

.fluid {
padding: 0 30px;
}

.cadeiras {
overflow-x: scroll;
}

.inner {
display: inline-block;
margin: 10px 20px;
}

#faded-Left {
left: 30px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1 ); /* IE6-8 */
}

#faded-Right {
right: 30px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, right top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1 ); /* IE6-8 */
}

.imgRelvado {
height: 40px;
line-height: 40px;
background: #04b46b;
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
}

.filas {
display: block;
font-weight: bold;
font-size: 11px;
color: #333;
}
.filas ul {
margin: 0;
padding: 10px;
list-style: none;
font-size: 12px;
height: auto;
}
.filas ul li {
height: 15px;
font-weight: bold;
list-style: none;
}

.seat div {
height: 11px !important;
width: 11px !important;
font-size: 9px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: none!important;
cursor: pointer;
}
.seatAvail div {
background: #05cd7a;
color: #000;
}
.seatTaken div {
background: #dbdbdb;
color: #000;
border: 1px solid #333333;
}
.seatReserv {
background: #858585;
color: #000;
border: 1px solid #5b5b5b;
}
.seatSelect {
background: #f5c226;
color: #000;
border: 1px solid #333333;
}
<div class="wrap">
<div class="imgRelvado">Relvado</div>
<div class="container clearfix">
<div id="fixed-Left" class="numbers left">
<div class="filas">
<ul><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul>
</div>
</div>
<div id="faded-Left" class="fader left">&nbsp;</div>
<div id="fixed-Right" class="numbers right">
<div class="filas">
<ul><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul>
</div>
</div>
<div id="faded-Right" class="fader right">&nbsp;</div>
<div class="fluid clearfix">
<div class="cadeiras">
<div class="inner">
<table>
<tr class="rowCadeiras"><td class="seat seatTaken"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td></tr>
<tr class="rowCadeiras"><td class="seat seatTaken"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td></tr>
<tr class="rowCadeiras"><td class="seat seatTaken"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td></tr>
<tr class="rowCadeiras"><td class="seat seatTaken"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td></tr>
<tr class="rowCadeiras"><td class="seat seatTaken"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td></tr>
<tr class="rowCadeiras"><td class="seat seatTaken"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td></tr>
<tr class="rowCadeiras"><td class="seat seatTaken"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td><td class="seat seatAvail"><div></div></td></tr>
</table>
</div>
</div>
</div>
</div>
</div>

关于html - 如何将水平滚动条放入内部有表格的流体 DIv 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28860430/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com