초보 border 관련 질문좀 드립니다.
본문
테이블은 아래 소스과 같아요 그런데 겹치는 부분이 그림처럼 진하고 두껍네 나와요
겹치게하면서 겹치지 않는 부분과 같게 할수는 없을까요?
답변좀 부탁합니다.
<아래>
<table border="1" align="center" width="50%" cellspacing="0" cellpadding="0">
<그림>
답변 5
아래와 같이 위 테이블 하단 테두리를 없애주어서 해주셔도 되고 간단하게
<table border="1"></table><table border="1" style="margin-top:-1px"></table>로
아래 테이블 상단 마진을 -1px 로 해주셔도 됩니다.
<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0
style='border-collapse:collapse;border:none;mso-border-top-alt:solid windowtext .5pt;
mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
mso-yfti-tbllook:1184;mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-border-insideh:
none;mso-border-insidev:none'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width=615 valign=top style='width:461.2pt;border:solid windowtext 1.0pt;
border-bottom:none;mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:
solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;padding:
0cm 5.4pt 0cm 5.4pt'>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
</td>
</tr>
</table>
<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0
style='border-collapse:collapse;border:none;mso-border-top-alt:solid windowtext .5pt;
mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
mso-yfti-tbllook:1184;mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-border-insideh:
none;mso-border-insidev:none'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width=615 valign=top style='width:461.2pt;border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt'>
<p class=MsoNormal><span lang=EN-US><o:p> </o:p></span></p>
</td>
</tr>
</table>
응용을 하시면 됩니다
<style>
table {
border-collapse: collapse;
border: 1px solid #ddd;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td,
table > tfoot > tr > th,
table > tfoot > tr > td {
border: 1px solid #ddd;
}
</style>
<table style="width: 100%;table-layout: fixed">
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<thead>
<tr>
<th>aaa</th>
<th>aaa</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>aaa</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>aaa</th>
<th>aaa</th>
</tr>
</tfoot>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.tbl {
border-collapse: collapse;
border-spacing: 0;
}
.tbl td {
border: 1px solid #000;
}
.test .tbl tr:last-child td {
border-bottom: 0;
}
.test .tbl:last-child tr td {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="test">
<table class="tbl">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
<table class="tbl">
<tr><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
</table>
</div>
</body>
</html>
위 테이블의 하단과 아래 테이블의 상단이 약간의 차이로 두줄이 그어진 상태로 보여집니다.
위 테이블의 하단과 아래 테이블의 상단의 마진 위치가 정확하게 맞아야 합니다.
또는 위 테이블의 하단 테두리나 아래 테이블의 상단 테두리의 둘 중 하나를 안보이게 해주시면 됩니다.
쉽지 않다면 그냥 <table><tr><td></td><tr><td></td></tr></table>로 하시는 것이 좋습니다.
