Question

我想以交叉未交叉的方式设计我的桌子，这是我的桌子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;
}

enter image description here

我想拥有边框，并且在交叉点没有边框，如下图所示：

enter image description here

这会将产品放在每个 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元素，但我不知道如何。或者只是画线或使用跨度？但是当我有这个循环函数获取产品时，我不知道如何解决它

提前致谢

Answer 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;
}

Answer 2

您可以使用表格形式并为您的行提供样式。这是我的示例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>

如何有表行和列板，没有交叉点

2 个答案: