桌子并排有溢出

Question

我想要一张并排的6张桌子，但是当它们到达最后时，它们会在下一行被订购。

我尝试了浮动，但是当达到显示宽度时，元素仍然在下一行开始。

欢迎任何提示。

这是我的代码：我删除了所有样式格式，因为我无法将它们排成一行。

Link: http://jsfiddle.net/S3n6D/101/

Answer 1

我认为你可以使用这个CSS;

table {
    width:15%;
    float:left;
}

如果你想要一个更宽的桌子，你也可以改变身体宽度;

body {
    width:1800px;
}

table {
    width:300px; /* or 15% if you want it more dynamic */
    margin:0;
    float:left;
}

Answer 2

完成一些清理并订购代码后，请尝试：

＆＃13;

＆＃13;

div {
  float: left;
}

＆＃13;

<table border="1">
  <thead>
    <tr>
      <th rowspan="1">&nbsp;</th>
    </tr>
    <tr>
      <th>Filiale</th>
    </tr>
  </thead>
</table>
<br>
<div>
  <table border="1">
    <!-- MO -->
    <thead>
      <tr>
        <th colspan="14">19.09.2016</th>
      </tr>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>


<div>
  <table border="1">
    <!-- DI -->
    <thead>
      <tr>
        <th colspan="13">20.09.2016</th>
      </tr>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>

<div>
  <table border="1">
    <!-- MI -->
    <thead>
      <tr>
        <th colspan="13">21.09.2016</th>
      </tr>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>
<div>
  <table border="1">
    <!-- DO -->
    <thead>
      <tr>
        <th colspan="13">22.09.2016</th>
      </tr>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>
<div>
  <table border="1">
    <!-- FR -->
    <thead>
      <tr>
        <th colspan="13">23.09.2016</th>
      </tr>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>
<div>
  <table border="1">
    <!-- SA -->
    <thead>
      <tr>
        <th rowspan="1">&nbsp;</th>
        <th colspan="13">24.09.2016</th>

      </tr>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;