(CSS) 티스토리 테이블 색상 변경

티스토리의 <table> (표) 테두리 스타일은 총 6가지가 있습니다.

기본, 선, 첫 행·열 배경색, 첫 행 굵은선, 격행 배경색, 선 없음

색상은 4가지가 있습니다.

DarkGray, SkyBlue, ForestGreen, RoyalBlue

data-ke-style 속성 값으로 정해집니다.

기본 테두리 색상은 회색이므로 원하는 색으로 설정을 해봅니다.

CSS 코드

article table {
    width:100%;
    font-size: 0.9375em;
    line-height: 1.5714;
    text-align: center;
    margin-bottom: 22px;
    border-collapse: collapse;
    border-spacing: 0;
}
article :is(table[data-ke-style="style1"], table[data-ke-style="style5"], table[data-ke-style="style9"], table[data-ke-style="style13"]) {
    border: 1px solid #80D0D7;
}
article :is(table[data-ke-style="style2"], table[data-ke-style="style6"], table[data-ke-style="style10"], table[data-ke-style="style14"]) {
    border: 1px solid #1D840D;
}
article :is(table[data-ke-style="style3"], table[data-ke-style="style7"], table[data-ke-style="style11"], table[data-ke-style="style15"]) {
    border: 1px solid #317ED3;
}
article :is(table[data-ke-style="style4"], table[data-ke-style="style8"], table[data-ke-style="style12"]) {
    border: 1px solid #9B9B9B;
}
article table tbody td {
    border-width: 1px;
}
article table tbody td {
    padding:7px 0 11px;
}
article :is(table[data-ke-style="style1"], table[data-ke-style="style5"], table[data-ke-style="style9"], table[data-ke-style="style13"]) tbody td {
    border: 1px solid #80D0D7;
}
article :is(table[data-ke-style="style2"], table[data-ke-style="style6"], table[data-ke-style="style10"], table[data-ke-style="style14"]) tbody td {
    border: 1px solid #1D840D;
}
article :is(table[data-ke-style="style3"], table[data-ke-style="style7"], table[data-ke-style="style11"], table[data-ke-style="style15"]) tbody td {
    border: 1px solid #317ED3;
}
article :is(table[data-ke-style="style4"], table[data-ke-style="style8"], table[data-ke-style="style12"]) tbody td {
    border: 1px solid #9B9B9B;
}

위 코드는 Bootstrap 스킨 기준입니다. 각 스킨의 HTML 구조에 맞게 편집해야 합니다.

 

결과

테이블	열	123	abc
행1	ㄱㄴㄷ ㄱㄴㄷ	123 123	abc
행2	ㄱㄴㄷ ㄱㄴㄷ	123	abc
행3	ㄱㄴㄷ ㄱㄴㄷ	123 123 123	abc

 

테이블	열	123	abc
행1	ㄱㄴㄷ ㄱㄴㄷ	123 123	abc
행2	ㄱㄴㄷ ㄱㄴㄷ	123	abc
행3	ㄱㄴㄷ ㄱㄴㄷ	123 123 123	abc

 

테이블	열	123	abc
행1	ㄱㄴㄷ ㄱㄴㄷ	123 123	abc
행2	ㄱㄴㄷ ㄱㄴㄷ	123	abc
행3	ㄱㄴㄷ ㄱㄴㄷ	123 123 123	abc

 

테이블	열	123	abc
행1	ㄱㄴㄷ ㄱㄴㄷ	123 123	abc
행2	ㄱㄴㄷ ㄱㄴㄷ	123	abc
행3	ㄱㄴㄷ ㄱㄴㄷ	123 123 123	abc

 

테이블	열	123	abc
행1	ㄱㄴㄷ ㄱㄴㄷ	123 123	abc
행2	ㄱㄴㄷ ㄱㄴㄷ	123	abc
행3	ㄱㄴㄷ ㄱㄴㄷ	123 123 123	abc

 

테이블	열	123	abc
행1	ㄱㄴㄷ ㄱㄴㄷ	123 123	abc
행2	ㄱㄴㄷ ㄱㄴㄷ	123	abc
행3	ㄱㄴㄷ ㄱㄴㄷ	123 123 123	abc

 

테이블	열	123	abc
행1	ㄱㄴㄷ ㄱㄴㄷ	123 123	abc
행2	ㄱㄴㄷ ㄱㄴㄷ	123	abc
행3	ㄱㄴㄷ ㄱㄴㄷ	123 123 123	abc

 

테이블	열	123	abc
행1	ㄱㄴㄷ ㄱㄴㄷ	123 123	abc
행2	ㄱㄴㄷ ㄱㄴㄷ	123	abc
행3	ㄱㄴㄷ ㄱㄴㄷ	123 123 123	abc

 

테이블	열	123	abc
행1	ㄱㄴㄷ ㄱㄴㄷ	123 123	abc
행2	ㄱㄴㄷ ㄱㄴㄷ	123	abc
행3	ㄱㄴㄷ ㄱㄴㄷ	123 123 123	abc