HTML 테이블에서 테두리를 완전히 제거하는 방법

HTML 테이블에서 테두리를 완전히 제거하는 방법

저의 목표는 "사진 액자"와 비슷한 HTML 페이지를 만드는 것입니다.즉, 4장의 그림으로 둘러싸인 빈 페이지를 만들고 싶습니다.

이게 내 암호입니다.

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

그리고 CSS 클래스는 다음과 같습니다.

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

저의 문제는 테이블의 셀 사이에 하얀 선이 가늘어지고 있다는 것입니다. 즉, 그림의 테두리가 연속적이지 않다는 것입니다.어떻게 하면 이 하얀 공간을 피할 수 있을까요?

<table cellspacing="0" cellpadding="0">

그리고 CSS에서:

table {border: none;}

편집: iGEL이 언급했듯이, 이 솔루션은 공식적으로 사용되지 않습니다(그래도 여전히 작동합니다). 따라서 처음부터 시작한다면 jnpcl의 국경 붕괴 솔루션을 사용해야 합니다.

저는 사실 지금까지 이 변화를 꽤 싫어합니다(테이블을 자주 사용하지 않음).이것은 몇몇 일들을 좀 더 복잡하게 만듭니다.예를 들어 두 개의 서로 다른 테두리를 같은 위치에 포함하고 싶은 경우(시각적으로), 하나는 한 행에 대해 TOP이고, 두 번째는 다른 행에 대해 Bottom입니다.붕괴됩니다(= 그 중 하나만 표시됨).그런 다음 보더의 "우선순위"가 어떻게 계산되는지, 그리고 어떤 보더 스타일이 "강력"한지(더블 대 솔리드 등)를 연구해야 합니다.

나는 이렇게 했습니다.

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

국경이 붕괴되면 항상 하나의 국경이 제거되기 때문에 이것은 작동하지 않을 것입니다.다른 방법으로 해야 합니다(c의 솔루션이 더 많습니다).한 가지 가능성은 박스 쉐도우와 함께 CSS3를 사용하는 것입니다.

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

단 하나의 테두리로 "groove|ridge|inset|outset" 테두리 스타일을 사용할 수도 있습니다.하지만 저는 두 가지 색깔을 다 조절할 수 없기 때문에 이것은 최적이 아닙니다.

어쩌면 국경이 무너지는 것에 대한 단순하고 좋은 해결책이 있을지도 모르지만, 저는 그것을 아직 보지 못했고 솔직히 그것에 많은 시간을 할애하지 않았습니다.아마 여기 있는 누군가가 나에게 보여줄 수 있을 겁니다 ;)

table {
    border-collapse: collapse;
}

저는 테이블과 모든 세포에서 경계를 완전히 제거하기 위해 이와 같은 작업을 해야 했습니다.이것은 HTML을 수정할 필요가 전혀 없어서 저의 경우에 도움이 되었습니다.

table, tr, td {
    border: none;
}

부트스트랩 환경에서 상위 답변 중 아무도 도움이 되지 않았지만 다음을 적용하면 모든 테두리가 제거되었습니다.

.noBorder {
    border:none !important;
}

적용 대상:

<td class="noBorder">

부트스트랩 환경에서는 다음과 같은 솔루션을 제공합니다.

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>    

이것이 문제를 해결해 준 것입니다.

HTML tr 태그에 다음을 추가합니다.

style="border-collapse: collapse; border: none;"

그것은 테이블 행에 표시되어 있던 모든 테두리를 제거했습니다.

TinyMCE 에디터를 사용해서 모든 경계를 제거할 수 있는 유일한 방법은border:hidden다음과 같은 스타일로.

<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>

그리고 HTML에는 다음과 같은 내용이 있습니다.

<table style="border:hidden;"</table>

건배.

2022년에는 (적어도 크롬의 경우에는) 어떤 대답도 통하지 않았습니다.<table cellspacing="0" cellpadding="0">. 하지만 저는 HTML이 아닌 CSS 솔루션이 필요했습니다.자, 여기 있습니다.

table,
thead,
tbody,
tfoot,
tr,
th,
td {
    padding: 0;
    border-spacing: 0;
}

padding는 HTML의 CSS 동의어입니다.cellpadding그리고.border-spacing각각 을 위한 것입니다.cellspacing. 하지만 아주 명백한 것은 아닙니다.

글로벌 CSS에서 이 CSS 스타일을 사용합니다.

.table,
.monthview-datetable td,
.monthview-datetable th {
  border: none !important;
}

발견했습니다.border-spacing내 문제가 되다시피

 td, th, tr, table {
    border: 0 !important;
    border-spacing:0 !important;
  }

table {
   border: none;
}

이 CSS 속성을 사용하여 테이블 테두리를 숨길 수 있습니다.

주어진:

    <table>
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
    <table>

CSS에서 이를 사용하면 다음과 같은 효과가 있습니다.

tr { 
    border: transparent 1px solid; 
   }
            

언급URL : https://stackoverflow.com/questions/5684144/how-to-completely-remove-borders-from-html-table