如何将水平滚动放入带有桌子的流体DIv中

时间：2015-03-04 17:01:54

标签： html css scroll fluid

我有一个带有桌子的流体div和每个TD内部的正方形，我想在其中放置一个水平滚动条。我有几个问题：

  1. 滚动条未显示;
  2. td类中的元素变得扭曲。
  3. 当我调整窗口浏览器的大小时，元素和div都在宽度之外。

    4. 我需要帮助。任何人？ 这是我的代码。 感谢

    <!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>

1 个答案:

答案 0 :(得分：0)

首先将div元素添加到表格单元格中，然后将seat样式应用于它们。固定尺寸设置不适用于表格单元格。

然后调整您的fluid样式：

.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>

相关问题
最新问题