Как вы можете видеть в моем HTML, у меня есть две таблицы. Теперь я хотел бы добавить входные данные после каждой таблицы:
1. Показывает, как выглядел мой Html без span
и input
s
2. Показывает, как это выглядит сейчас: http://jsfiddle.net/tLHSB/2/
3.Как я хотел бы иметь это
Спасибо за вашу помощь!
Мой HTML:
<span>
<table class="table table-bordered" style="font-size:13px; width:50px; float:left;" id="ScheinDiagnosen">
<thead>
<tr id="DiagnosenButton">
<th>Number1</th>
</tr>
</thead>
<tbody id="DiagnosenBlock" style="background-color: red">
<tr class="sanD"><td>H26.2</td></tr>
<tr class="sanD"><td>H90.2</td></tr>
<tr class="sanD"><td>B01.1</td></tr>
<tr class="sanDD"><td>B01.1</td></tr></tbody>
</table>
<input style="width:10px; display:block">
</span>
<span>
<table class="table table-bordered" style="font-size:13px; width:50px; float: left;" id="ScheinEbms">
<thead>
<tr id="EBMButton">
<th>Number</th>
</tr>
</thead>
<tbody id="EbmBlock" style="background-color: blue;">
<tr><td>02401</td></tr>
<tr><td>02400</td></tr>
<tr><td>03322</td></tr>
</tbody>
</table>
<input style="width:10px;display:block">
</span>
Проблема в том, что вы плаваете ваши таблицы, что заставляет их выходить из потока документов. Есть несколько способов выполнить то, что вы хотите, но попробуйте заменить элементы span
на div
и поместить их вместо таблиц.
Кроме того, не используйте встроенные стили, используйте блок CSS. Это улучшит ваш код в долгосрочной перспективе.
Заменяя свой span
на div
s и удаляя встроенные стили, ваш новый CSS будет выглядеть так:
table {
font-size:13px;
width:50px;
}
#DiagnosenBlock {
background-color: red;
}
#EbmBlock {
background-color: blue;
}
div {
float: left;
}
Добавьте это в свой css:
span {
float:left;
}
И удалите float:left
от вашего стиля table
.
Проверьте это здесь: http://jsfiddle.net/tLHSB/5/