programing

테두리 스타일은 끈적거리는 위치 요소와 함께 작동하지 않습니다.

jooyons 2023. 9. 27. 17:56
반응형

테두리 스타일은 끈적거리는 위치 요소와 함께 작동하지 않습니다.

이 맞지 .position: sticky;기여하다.끈적끈적한 테이블 헤더에 테두리 스타일을 설정하고 싶습니다.하지만 저는 투명한 배경색을 사용하고 싶지 않습니다.어떻게 하면 달성할 수 있을까요?여기 내 문제에 대한 샘플 코드와 JSFiddle Link가 있습니다.

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table tr th,
table tr td {
  border: 2px solid;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #edecec;
}
<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tbody>
    </tbody>
  </table>
</div>

아래는 제가 원하는 것과 제 질문을 충분히 이해하지 못하는 사람들에 대한 스크린샷입니다.

enter image description here

의 인라인 을 볼 수 .th작동하지 않습니다(CSS의 속성을 제거하면 주변에 보더가 표시됩니다.).

enter image description here

스크롤을 조금 내린 다음에.모든 테두리 스타일이 사라졌음을 알게 될 것입니다.

는 를 사용하기 에 발생합니다.border-collapse: collapse의 및 가 축소됩니다.<th>다계)에 대한 인 주변.<table> 테두리는 다와 .<tr>.

사용하는 경우border-collapse: separate면 됩니다.<th>된 것처럼 .

HTML 스니펫에 적용할 수 있는 예 스타일은 다음과 같습니다.

#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}
<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
        <td>8</td>
        <td>8</td>
        <td>8</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
      </tr>
    </tbody>
  </table>
</div>

를 해야 합니다.box-shadow이 아닌 border-top/border-bottom과 첫 또한 표의 머리 부분과 첫 번째 행에 대한 위쪽/아래쪽 테두리를 삭제해야 합니다.

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table tr th,
table tr td {
  border: 2px solid;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #edecec;
}


/* here is the trick */

table tbody:nth-of-type(1) tr:nth-of-type(1) td {
  border-top: none !important;
}

table thead th {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: inset 0 2px 0 #000000, inset 0 -2px 0 #000000;
  padding: 2px 0;
}


/* and one small fix for weird FF behavior, described in https://stackoverflow.com/questions/7517127/ */

table thead th {
  background-clip: padding-box
}
<body>
  <div id="wrapper">
    <table>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
        <tr>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>7</td>
          <td>7</td>
          <td>7</td>
          <td>7</td>
        </tr>
        <tr>
          <td>8</td>
          <td>8</td>
          <td>8</td>
          <td>8</td>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
          <td>9</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

<td style="position: sticky;
           top: 0;
           left: 0;
           right: 0;
           padding: 4px 3px;
           background-color: #d3d3d3;
           box-shadow: inset 0 1px 0 black, inset 0 -1px 0 black;">
</td>

100% 작업한 이 제품을 사용합니다.

끈적거리는 위치가 상대적인 것과 고정적인 것 사이에서 변동하기 때문에, 제가 생각할 수 있는 유일한 방법은 psuedo 수업을 이용하는 것뿐입니다.

더하지만 .:after그리고.:before절대 위치 지정과 함께 경계를 제공하는 psuedo 클래스.

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table tr th,
table tr td {
  border: 2px solid;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  background-color: #edecec;
}
th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}
th:before {
  top: 0;
  border-top: 3px solid blue;
}
th:after {
  bottom: 0;
  border-bottom: 3px solid blue;
}
<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tbody>
    </tbody>
  </table>
</div>

를 하는 건 요?border와 함께outline 수 있는 은 특히 요소의 ? 은, 는입니다.outline와 거의 을 합니다.border한 것으로 있습니다 박스 모델 등에서 벗어난 것이 아니라 시각적으로 동일한 것으로 알고 있습니다.시도해 보기:

table tr th,
table tr td {
  border: 0; 
  outline: 2px solid;
}

다음은 이러한 접근 방식을 보여주는 실시간 토막입니다.

#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}
table {
  width: 100%;
  text-align: center;
}
table thead {
  position: sticky;
  top: 2px; /* Must match the outline width */
  background-color: #edecec;
}
table tr th,
table tr td {
  border: 0; 
  outline: 2px solid;
}
<div id="wrapper">
  <table>
    <thead>
      <tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
    </thead>
    <tbody>
      <tr><td>0</td><td>0</td><td>0</td><td>0</td></tr>
      <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
      <tr><td>2</td><td>2</td><td>2</td><td>2</td></tr>
      <tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
      <tr><td>4</td><td>4</td><td>4</td><td>4</td></tr>
      <tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
      <tr><td>6</td><td>6</td><td>6</td><td>6</td></tr>
      <tr><td>7</td><td>7</td><td>7</td><td>7</td></tr>
      <tr><td>8</td><td>8</td><td>8</td><td>8</td></tr>
      <tr><td>9</td><td>9</td><td>9</td><td>9</td></tr>
    </tbody>
  </table>
</div>

하세요.outline인 요소를 며, 것은 .outline-left, 그래서 은탄이 아닙니다.자세한 내용은 MDN의 개요를 참조하시기 바랍니다.

업데이트: 한 가지 세부 사항을 간과했습니다. 개요가 제대로 정렬되어 있지 않습니다.tbody국경선스왑을 선택해야 합니다.border그리고.outline 용도용.transform그리고 넛지.)thead, 하지만 아마도 그것은 좋은 방법이 아닐 것입니다. (물론 그것은 다릅니다.)

사용하다::after의사 선택기를 에뮬레이트합니다. 예를 사용합니다.

예:

th::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-right: 1px solid #e7e7e7;
}

이제 경계 스타일을 다음과 같이 설정할 수 있습니다.psuedo classes@soulshineed 사용자가 제안한 것처럼.아래는 CSS의 작업 변경 사항이며 여기 JSFiddle Link입니다.크롬과 파이어폭스에서 이미 테스트가 완료되었습니다.

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
  padding: 1px;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
table tr th {
  border: 1px solid green;
}
table tr th:first-child {
  border-left: 1px solid green;
}
table tr td {
  border: 1px solid green;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #edecec;
}

th::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-right: 1px solid green;
  display: block;
  top : 1px;
}

th::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid green;
  border-top: 1px solid green;
  display: block;
  top : -1px;
}

기존 답변 중 일부를 시도했지만 댓글이 언급했듯이 테두리 사이에 1픽셀 간격이 발생합니다.

자바스크립트가 필요하지만 해결책을 만들었습니다.그것은 a를 배치합니다.<div>각각<th>, 크기를 조정할 때 적합합니다.<div>에게<th>.그<th>그 다음에 국경이 대신 적용됩니다.<div>.

이 글을 쓰는 현재,position: sticky크롬에서 작동하지 않습니다.<thead>, 파이어폭스에서 작동합니다.은,position: sticky자바스크립트가 실행되지 않으면 관련 CSS는 페이지에 영향을 주지 않습니다.

브라우저에서 작동하는지 확인하려면 클릭합니다.

function onResize() {
    $("thead th div").each(function () {
        var width = $(this).parent().outerWidth() - 2; // -2 * border-width
        $(this).css("width", width + "px");
    });
}

$("thead th").each(function () {
    $(this).append($("<div>"));
});

$(window).on("resize", onResize);
onResize();
table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
}

th, td {
    padding: 12px 20px;

    border: 1px solid rgba(0, 0, 0, 0.125);
}

table thead {
    position: sticky;
    top: 0;

    background: #FFF;
}

/* Used as a workaround for position: sticky not rendering the border */
thead th div {
    width: 30px;
    margin: 0 -20px; /* -20px to negate the 20px from the padding */
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;

    border-right: 1px solid rgba(0, 0, 0, 0.125);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>

        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>

        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>

        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    </tbody>
</table>

파이어폭스로 제한하기 위해 이전 자바스크립트를 다음과 같이 랩합니다.

if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
    // ...
}

스크린샷(방화구 71):

Screenshot (Firefox 71)

1px 경계를 생성하는 솔루션을 찾는 사람들에게 @blackheart의 답변에 대한 다음과 같은 수정이 가능했습니다.

/* Styles to make the StackOverflow snippet render nicely */
#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}
table {
  width: 100%;
  text-align: center;
}

/* Actual sticky-header styles */
table {
  border-spacing: 0;
}
table thead {
  position: sticky;
  top: 0;
  background-color: #edecec;
}
table th { 
  border: 1px solid;
  border-left: none;
}
table td {
  border: 1px solid;
  border-left: none;
  border-top: none;
}
table tr > th:first-child,
table tr > td:first-child {
  border-left: 1px solid;
}
<div id="wrapper">
  <table>
    <thead>
      <tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
    </thead>
    <tbody>
      <tr><td>0</td><td>0</td><td>0</td><td>0</td></tr>
      <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
      <tr><td>2</td><td>2</td><td>2</td><td>2</td></tr>
      <tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
      <tr><td>4</td><td>4</td><td>4</td><td>4</td></tr>
      <tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
      <tr><td>6</td><td>6</td><td>6</td><td>6</td></tr>
      <tr><td>7</td><td>7</td><td>7</td><td>7</td></tr>
      <tr><td>8</td><td>8</td><td>8</td><td>8</td></tr>
      <tr><td>9</td><td>9</td><td>9</td><td>9</td></tr>
    </tbody>
  </table>
</div>

참고: @Kout의 사용 솔루션을 지적해야 합니다.outlineborder또한 기발하고 훨씬 짧지만(3개가 아닌 하나의 추가 규칙 집합만 필요), 안타깝게도 1px 버전(부정적인 방법을 사용하여 인접 윤곽선을 병합하려고 시도했습니다)은 Firefox에서는 작동하지만 Chrome에서는 작동하지 않습니다. 여기서 주변에 1px 윤곽이 표시됩니다.<table>그리고.<th>s에 있는 윤곽, 2 의 px 를 하십시오.<td>s:

/* Styles to make the StackOverflow snippet render nicely */
#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}
table {
  width: 100%;
  text-align: center;
}

/* Actual sticky-header styles */
table {
  border-spacing: 0;
  /* Subtract a pixel because the width calculation
   * doesn't account for outlines */
  width: calc(100% - 1px);
}
table thead {
  position: sticky;
  top: 0;
  background-color: #edecec;
}
table tr th,
table tr td {
  outline: 0.5px solid;
  outline-offset: -0.5px;
}
<div id="wrapper">
  <table>
    <thead>
      <tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
    </thead>
    <tbody>
      <tr><td>0</td><td>0</td><td>0</td><td>0</td></tr>
      <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
      <tr><td>2</td><td>2</td><td>2</td><td>2</td></tr>
      <tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
      <tr><td>4</td><td>4</td><td>4</td><td>4</td></tr>
      <tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
      <tr><td>6</td><td>6</td><td>6</td><td>6</td></tr>
      <tr><td>7</td><td>7</td><td>7</td><td>7</td></tr>
      <tr><td>8</td><td>8</td><td>8</td><td>8</td></tr>
      <tr><td>9</td><td>9</td><td>9</td><td>9</td></tr>
    </tbody>
  </table>
</div>

  1. 헤더 테두리가 보이는 끈적임

html{
    padding: 0px;
    margin: 0px;
}
body{
    padding: 0px;
    margin: 0px;
    width:100%;
}

 th,td{
     padding:10px;
     border: 0.1px solid #e8e0e0;
     padding-right:10px;
 }   
 th{
     text-align: center;
    background: #f3f3f3;
    background-clip: padding-box;
 }


thead th:first-child {
  left: 0;
  z-index: 1;
}
tbody th:first-child  {
   text-align: center;
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
 
}
tbody th,thead th:first-child  {
/* display:flex; */
/* text-align: center;
align-items: center;
align-self: center; */
    width:30px;
    
    min-width: 30px;
    max-width: 30px;
    word-break: break-all;
}
.fixed_header{
    width: 100%;
    /* height: 500px; */
    table-layout: fixed;
    border-collapse: collapse;
}
/* .fixed_header tbody{
  overflow: auto;
 
} */

/* fixed header */
thead th {
    /* for Safari */
 text-align: center;
  position: -webkit-sticky;
   position: sticky;

  top: 0;


}

.fixed_header th, .fixed_header td {
    padding:10px;
  /* text-align: left; */
  width: 90px;
}

.fixed_header td{
    /* padding:10px; */
/* word-break: break-all; */
/* max-width: 200px; */
}
.table_container{
/* position: fixed; */
position: relative;
width:100% ;
min-height: 500px;
overflow: auto;
background:cornsilk;
}
 <table class="fixed_header">
                <thead>
                  <tr>
                   <th></th>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th>Col 5</th>
                          <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th>Col 5</th>
                          <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th>Col 5</th>
                          <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th>Col 5</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>1</th>
                    <td>row 1-1</td>
                    <td>row 1-2</td>
                    <td>row 1-3</td>
                    <td>row 1-4</td>
                    <td>row 1-1</td>
                    <td>row 1-2</td>
                    <td>row 1-3</td>
                    <td>row 1-4</td>
                    <td>row 1-1</td>
                    <td>row 1-2</td>
                    <td>row 1-3</td>
                    <td>row 1-4</td>
                    <td>row 1-1</td>
                    <td>row 1-2</td>
                    <td>row 1-3</td>
                    <td>row 1-4</td>
                    <td>row 1-1</td>
                    <td>row 1-2</td>
                    <td>row 1-3</td>
                    <td>row 1-4</td>  
                </tr>     

                </tbody>
              </table>
            </div>

이것이 가장 간단한 답이라고 생각합니다.

허용된 답변은 1px 테두리에 대한 해결책을 제공하지 않습니다.

참고: 이것은 주변의 일이니, 나에게 불평하지 마세요.

을 하면.border-top테이블 헤더에서 테이블은 접을 것이 없으므로 기본 셀까지 볼 수 있는 공간이 생성되지 않습니다. 교체border-top같은 스타일의 테두리를 가진 DIV.

CSS:

table thead tr:nth-child(1) th {
  position: sticky; 
  border-top:0;
}

.table_holder {
  border-top:1px solid black;
}

html:

<div id="table_holder">
  <table> ... </table>
</div>

사용하는 경우postion: sticky,td의 국경은 에서 물려받은 것입니다.tr, border-collapse: separate, 2px 를 .td의border-right그리고.border-bottom;

코드는 다음과 같습니다.

<style>
table {
 border-collapse: separate;
}

table th:first-child,
table td:first-child{
  border-left: 1px solid;
}

table th {
  border-top: 1px solid;
}

table th,td {
  text-align: center;
}

th,td,tr {
  border-bottom: 1px solid;
  border-right: 1px solid;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

</style>

<style>
thead{
    position: sticky;
    z-index: 2;
    top: 0;
    background-color: white;
};
    
table {
    border-collapse: separate;
}
</style>
<table cellspacing="0">
    <!--...-->
</table>

사용하다table thead thtable thead. 데모입니다.https://jsfiddle.net/nhatphamcdn/9dhqchtu/

언급URL : https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element

반응형

'programing' 카테고리의 다른 글

스프링 부츠 테스트 "형식의 적격 빈 사용 불가"  (0) 2023.10.02
데이터 프레임을 벡터(행 단위)로 변환  (0) 2023.10.02
mmap, msync 및 linux 프로세스 종료  (0) 2023.09.27
커서_SHARING, Bind Variable Peeeking 및 히스토그램 간의 관계  (0) 2023.09.27
Angularjs 와 Angular의 차이  (0) 2023.09.27

'programing'의 다른글

  • 현재글테두리 스타일은 끈적거리는 위치 요소와 함께 작동하지 않습니다.

관련글

댓글

티스토리툴바