Пытаясь создать таблицу / сетку вкладок, моя проблема заключается в том, что вкладки не отображаются, как я надеялся, и отображают каждый элемент там, где он не должен. Я взял пример из http://jsfiddle.net/DHTTWL/jmdjpge0/ и изменил его, чтобы он работал для того, что мне нужно.
Я пытался использовать таблицы div с CSS, чтобы выровнять все, но вкладка не отображается. Я пытался использовать обычные таблицы, хотя я ненавижу использовать таблицы и div. Я сделал все классы DIV разными, изменив их со счетчиком в базе данных. Запустил немного базового кода на Jfiddle, чтобы выяснить расположение, но как только я добавляю любой php, он разбивается на части.
$count = mysqli_num_rows($result);
$i = 1;
echo "<table>";
while ($row = mysqli_fetch_assoc($result))
{
///VARIABLES///
if($i%2==1) echo "<tr>";
echo "<style> span.stext {
font-size: 20px;
display:table;
margin-left: auto;
margin-right: auto;
text-align: center</style>";
echo "<style>///TABLE STYLING</style>";
echo "<tr>";
echo "<td>";
echo "<a href='someaddress.php?
stocknr=$stock'>$rvehicle</a>";
echo "</td></tr>";
echo "<tr><td>";
echo "<a href='someaddress.php?stocknr=$stock'>";
echo "<img src='$picloc' border='0' alt='' width='400' height='250'>
</a>";
echo "</td></tr><tr><td>";
echo "<div class ='$tabheader'>";
echo "<ul>";
echo "<li>";
echo "<a href='#$tabone'>";
///QUERY///
{
echo $kilometers1;
}
echo "</a>";
echo "</li>";
echo "<li>";
echo "<a href='#$tabtwo'>";
///QUERY////
{
echo "$kilometers2";
}
echo "</a>";
echo "</li>";
echo "</ul>";
///TAB FOR $KILOMETERS1////
echo "<div id='$tabheader1'>";
echo "<div class='rTable'>";
echo "<div class='rTableRow'>";
echo "<div class='rTableCellimg'>";
////QUERY////
{
echo "<img src='$airconup' border='0' alt='' width='32' height='32'>";
}
echo "</div>";
echo "<div class='rTableCelldesc'>";
echo "<span class='stext'>$aircon</span>";
echo "</div>";
echo "<div class='rTableCellimg'>";
///QUERY////
{
echo "<img src='$transup' border='0' alt='' width='32' height='32'>";
}
echo "</div>";
echo "<div class='rTableCelldesc'>";
echo "<span class='stext'>$trans</span>";
echo "</div>";
echo "<div class='rTableCellimg'>";
///QUERY///
{
echo "<img src='$fuelup' border='0' alt='' width='32' height='32'>";
}
echo "</div>";
echo "<div class='rTableCelldesc'>";
echo "<span class='stext'>$fuel</span>";
echo "</div>";
echo "</div>";
echo "<div class='rTableRow'>";
echo "<div class='rTableCellimg'>";
////QUERY///
{
echo "<img src='$luggup' border='0' alt='' width='32' height='32'>";
}
echo "</div>";
echo "<div class='rTableCelldesc'>";
echo "<span class='stext'>$luggage</span>";
echo "</div>";
echo "<div class='rTableCellimg'>";
///QUERY///
{
echo "<img src='$seatsup' border='0' alt='' width='32' height='32'>";
}
echo "</div>";
echo "<div class='rTableCelldesc'>";
echo "<span class='stext'>$seats</span>";
echo "</div>";
echo "<div class='rTableCellimg'>";
///QUERY///
{
echo "<img src='$psteerup' border='0' alt='' width='32' height='32'>";
}
echo "</div>";
echo "<div class='rTableCellimg'>";
echo "<span class='stext'>$psteer</span>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div id='$tabone'>";
echo "<ul>";
echo "<li><a href='#$tab1nt1'>";
///QUERY///
{
echo "$pricelengthn3";
}
echo "</a></li>";
echo "<li><a href='#$tab1nt2'>";
///QUERY///
{
echo "$pricelengthn4";
}
echo "</a></li>";
echo "<li><a href='#$tab1nt3'>";
///QUERY///
{
echo "$pricelengthn5";
}
echo "</a></li>";
echo "</ul>";
echo "<div id='$tab1nt1'>";
echo "<div class='rTableRow'>";
echo "<div class='rTableCell'>";
echo "<span class='stext'>$pricelength3</span>";
echo "</div>";
echo "<div class='rTableCell'>";
echo "///FORM DATA///";
echo "</div>";
echo "<div id='$tab1nt2'>";
echo "<div class='rTableCell'>";
echo "<span class='stext'>$pricelength4</span>";
echo "</div>";
echo "<div class='rTableCell'>";
echo "///FORM DATA///";
echo "</div>";
echo "</div>";
echo "<div id='$tab1nt3'>";
echo "<div class='rTableCell'>";
echo "<span class='stext'>$pricelength5</span>";
echo "</div>";
echo "<div class='rTableCell'>";
echo "///FORM DATA///";
echo "</div></div></div></div>";
///TAB FOR $KILOMETERS2////
echo "<div id='$tabheader2'>";
echo "<div id='$tabtwo'>";
echo "<ul>";
echo "<li><a href='#$tab2nt1'>";
///QUERY/// {
echo "$pricelengthn3";
}
echo "</a></li>";
echo "<li><a href='#$tab2nt2'>";
///QUERY///{
echo "$pricelengthn4";
}
echo "</a></li>";
echo "<li><a href='#$tab2nt3'>";
//QUERY//{
echo "$pricelengthn5";
}
echo "</a></li>";
echo "</ul>";
echo "<div id='$tab2nt1'>";
echo "<div class='rTableRow'>";
echo "<div class='rTableCell'>";
echo "<span class='stext'>$pricelength3</span>";
echo "</div>";
echo "<div class='rTableCell'>";
echo "///FORM DATA///";
echo "</div></div></div>";
echo "<div id='$tab2nt2'>";
echo "<div class='rTableRow'>";
echo "<div class='rTableCell'>";
echo "$pricelength4";
echo "</div>";
echo "<div class='rTableCell'>";
echo "///FORM DATA//";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div id='$tab2nt3'>";
echo "<div class='rTableRow'>";
echo "<div class='rTableCell'>";
echo "<span class='stext'>$pricelength5</span>";
echo "</div>";
echo "<div class='rTableCell'>";
echo "///FORM DATA///";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</td>";
if($i%2==0 || $i == $count) echo "</tr>";
$i++;
echo "<script>
$(function() {
$( '#$tabheader' ).tabs();
$( '#$tabone' ).tabs();
$( '#$tabtwo' ).tabs();
});
</script>";
}
echo "</table>";
// filling row with empty cells
while ($row = mysqli_fetch_array($result))
{
$count = mysqli_num_rows($result);
for ($i = 1; $i <= $count; $i++)
{
if(($i - 1) % 2 != 0)
{
echo "<td></td>";
}
$i++;
// for 4th, 8th, 12th etc record insert a tag for end of the row
if (($i - 1) % 2 == 0)
{
echo "</tr>";
}
}
}
echo "</table>";
Согласно тому, что я испытал, существует огромная разница с тем, что появляется на http://jsfiddle.net/DHTTWL/jmdjpge0/, и тем, что появляется на моем веб-сайте. У меня были загружены две вложенные вкладки одна за другой