как иметь таблицы строк и столбцов доски и не иметь пересечений

0

Я хочу создать таблицу таким образом, чтобы пересечения не пересекались, вот моя таблица 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;
}

Изображение 174551

Я хочу иметь границы и не иметь границ на пересечениях, как показано ниже:

Изображение 174551

это поместит продукты в таблицу в каждом условии 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 в пересечениях, но я не знал, как это сделать. или, может быть, просто рисовать линии или использовать пролет? но я не знаю, как его решить, когда у меня есть эта функция цикла, получающая продукты

заранее спасибо

  • 0
    Я бы добавил 2 строки между каждой соответствующей строкой и два столбца между каждым соответствующим столбцом, и тогда вы сможете создать это точно. Но для кодирования требуется гораздо больше ячеек, но с использованием CSS и классов это должно быть легко!
  • 0
    @DenverWilliam Я старался изо всех сил! кажется возможным, но я опять не смог
Теги:

2 ответа

1

вы можете использовать форму таблицы и придавать стиль вашим строкам. вот мой пример 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>
  • 0
    Большое спасибо, голосование
1

Я сделал это в виде таблицы, но вы можете легко перевести его в элементы 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;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню