Я хочу создать таблицу таким образом, чтобы пересечения не пересекались, вот моя таблица css:
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0; border-right: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
border-left: 0;
}
.product_column {
padding: 3px;
margin-right: 5px;
margin-left: 5px;
}
Я хочу иметь границы и не иметь границ на пересечениях, как показано ниже:
это поместит продукты в таблицу в каждом условии if:
<?php if($colunmNumber =0)
echo('<tr><td>');
else
echo('<td style="text-align:center;">');
$colunmNumber = $counter % $columns;
?>
<div class="product_column" >
<div class="product_image"><?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?>
//some php code
</div>
<div class="product_title" >
//some php code
</div>
</div>
и если это возможно со столами, я этого не знаю. кажется, что я должен добавить элемент div в пересечениях, но я не знал, как это сделать. или, может быть, просто рисовать линии или использовать пролет? но я не знаю, как его решить, когда у меня есть эта функция цикла, получающая продукты
заранее спасибо
вы можете использовать форму таблицы и придавать стиль вашим строкам. вот мой пример html-кода:
<html>
<body>
<table>
<tr>
<td><img src="samplePic.jpg"</td>
<td>
<div
style="float: left; background: url(vline.jpg ) repeat-y top; width: 20px; height: 200px"></div>
<td>
<td><img src="samplePic.jpg"</td>
</tr>
<tr>
<td>
<div
style="float: left; width: 167px; padding: 15px 0 15px 0; background: url(hline.jpg) repeat-x center;"></div>
</td>
<td>
<div style="float: left; width: 20px;"></div>
<td>
<td>
<div
style="float: left; width: 167px; padding: 15px 0 15px 0; background: url(hline.jpg) repeat-x center;"></div>
</td>
</tr>
<tr>
<td><img src="samplePic.jpg"</td>
<td>
<div
style="float: left; background: url(vline.jpg ) repeat-y top; width: 20px; height: 200px"></div>
<td><td><img src="samplePic.jpg"</td>
</tr>
</table>
</body>
</html>
Я сделал это в виде таблицы, но вы можете легко перевести его в элементы div, используя ту же философию.
Здесь слишком много кода, поэтому я сделал вам пример здесь: http://jsfiddle.net/5WzVV/
<table>
<tr>
<td class="r"></td>
<td></td>
<td></td><td></td>
<td></td>
<td></td><td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="c"></td>
<td class="e">A</td>
<td class="c br"></td><td class="c"></td>
<td class="e">B</td>
<td class="c br"></td><td class="c"></td>
<td class="e">C</td>
<td class="c"></td>
</tr>
<tr>
<td class="r"></td>
<td class="bb"></td>
<td></td><td></td>
<td class="bb"></td>
<td></td><td></td>
<td class="bb"></td>
<td></td>
</tr>
<tr>
<td class="r"></td>
<td></td>
<td></td><td></td>
<td></td>
<td></td><td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="e">D</td>
<td class="br"></td><td></td>
<td class="e">E</td>
<td class="br"></td><td></td>
<td class="e">F</td>
<td></td>
</tr>
<tr>
<td class="r"></td>
<td class="bb"></td>
<td></td><td></td>
<td class="bb"></td>
<td></td><td></td>
<td class="bb"></td>
<td></td>
</tr>
<tr>
<td class="r"></td>
<td></td>
<td></td><td></td>
<td></td>
<td></td><td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="e">G</td>
<td class="br"></td><td></td>
<td class="e">H</td>
<td class="br"></td><td></td>
<td class="e">I</td>
<td></td>
</tr>
<tr>
<td class="r"></td>
<td></td>
<td></td><td></td>
<td></td>
<td></td><td></td>
<td></td>
<td></td>
</tr>
</table>
и css:
td.e { // cell with an product
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
}
td.r { // spacer cell row
height: 5px;
}
td.c { // spacer cell column
width: 5px;
}
td.bb { // border at bottom of first spacer row
border-bottom: 1px solid #000;
}
td.br { // border at bottom of first spacer column
border-right: 1px solid #000;
}