초보 border 관련 질문좀 드립니다.

초보 border 관련 질문좀 드립니다.

QA

초보 border 관련 질문좀 드립니다.

본문

테이블은 아래 소스과 같아요 그런데 겹치는 부분이 그림처럼 진하고 두껍네 나와요

겹치게하면서 겹치지 않는 부분과 같게 할수는 없을까요?

답변좀 부탁합니다.

 

<아래>

<table  border="1" align="center" width="50%" cellspacing="0" cellpadding="0">

 

<그림>

c3b410e54ebf22f7f3cf89e4eddf1fe7_1502191209_2302.jpg
 

 

 

 

 

이 질문에 댓글 쓰기 :

답변 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>로 하시는 것이 좋습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 153
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT