创建一个具有1个像素图像的7列/ 3行表格,可以扩展以模拟线条,如何使用
HTML和CSS复制这个布局,而不需要使用表格或图像“分隔符”？
我真正喜欢的是线条不相交.
<!-- layout reproduced -->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
<TR ALIGN="center">
<TD CLASS="boldedcolor4text">the first</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the second</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the third</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the fourth</TD>
</TR>
<TR ALIGN="center">
<TD COLSPAN="7"><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="520" HEIGHT="1"></TD>
</TR>
<TR ALIGN="center">
<TD><A CLASS="image" HREF="><IMG SRC="1.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="2.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="3.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="4.jpg" ALT="" BORDER="0"></A></TD>
</TR>
</TABLE>
解决方法
你可以试试像：
https://jsfiddle.net/wh48rjvt/
SCSS：
$border: 1px solid grey;
.table-row {
border-bottom: $border;
&:last-child {
border-bottom: 0;
}
.table-Box {
border-right: $border;
margin: 0.75rem 0;
&:last-child {
border-right: 0;
}
}
}
HTML：
<div class="container">
<div class="table-row row">
<div class="table-Box col-xs-3">1</div>
<div class="table-Box col-xs-3">2</div>
<div class="table-Box col-xs-3">3</div>
<div class="table-Box col-xs-3">4</div>
</div>
<div class="table-row row">
<div class="table-Box col-xs-3">5</div>
<div class="table-Box col-xs-3">6</div>
<div class="table-Box col-xs-3">7</div>
<div class="table-Box col-xs-3">8</div>
</div>
...
</div>
我使用Bootstrap作为网格.
