Я хочу 6 столов бок о бок, но когда они достигают конца, они упорядочены на следующей строке.Столы бок о бок с переполнением
Я пробовал поплавок, но элементы все еще начинались со следующей строки, когда была достигнута ширина экрана.
Любые советы приветствуются.
Вот мой код: Я отобрал все форматы стилей, потому что не мог выстроить их в одну строку.
Link: http://jsfiddle.net/S3n6D/101/
Я думаю, вы можете использовать этот css;
table {
width:15%;
float:left;
}
Вы также можете изменить ширину корпуса, если хотите более широкий стол;
body {
width:1800px;
}
table {
width:300px; /* or 15% if you want it more dynamic */
margin:0;
float:left;
}
Когда конец линии достигнут, элементы устанавливаются на новой строке ... Я просто хочу выровнять их и сделать прокручиваемыми ... – Moonstar
После некоторых Чистым и ордена в код, пожалуйста, попробуйте:
div {
float: left;
}<table border="1">
<thead>
<tr>
<th rowspan="1"> </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"> </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>
Вы можете разместить свой код? – Dsenese1
Да, я просто забрал стиль, потому что я действительно испортил его ... Можете ли вы дать мне подсказки? – Moonstar
Вы должны вставить фактический код в вопрос, используя фрагмент кода, а не ссылку. –