I need help designing my table so that the intersections do not have crossed borders. Here is the CSS code I am using for my table:
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;
}
I want to achieve a design where the borders align without crossing at the intersections, similar to the image below:
The following code will display the products in the table based on each if condition:
<?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>
If using tables alone does not resolve this issue, I am open to suggestions such as adding div elements or drawing lines with spans. However, I am unsure how to implement these solutions while maintaining the loop function that retrieves product information.
Thank you for your assistance