테이블의 특정 행 주위에 테두리가 있습니까?

120

표의 특정 행 주위에 테두리를 둘 수있는 HTML / CSS를 디자인하려고합니다. 예, 레이아웃에 테이블을 사용해서는 안된다는 것을 알고 있지만 아직 완전히 대체 할 CSS를 충분히 알지 못합니다.

어쨌든, 여러 행과 열이있는 테이블이 있고 일부는 rowspan 및 colspan과 병합되었으며 테이블의 일부 주위에 간단한 테두리를 배치하고 싶습니다. 현재 저는 4 개의 개별 CSS 클래스 (상단, 하단, 왼쪽, 오른쪽)를 사용하고 있으며 <td>각각 표의 상단, 하단, 왼쪽 및 오른쪽에있는 셀에 첨부합니다 .

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}

<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</html>

스 니펫 확장

내가 원하는 것을 더 쉽게 할 수있는 방법이 있습니까? 상단과 하단을 a에 적용 해 보았지만 <tr>작동하지 않았습니다. (ps 저는 CSS를 처음 접했기 때문에 놓친 것에 대한 정말 기본적인 해결책이있을 것입니다.)

참고 : 테두리가있는 섹션이 여러 개 있어야합니다. 기본 아이디어는 각각 여러 행을 포함하는 여러 개의 경계 클러스터를 갖는 것입니다.

— 카일 크로닌
소스

9

주제

— 벗어 났지만

114

어때요 tr {outline: thin solid black;}? tr 또는 tbody 요소에서 나를 위해 작동하며 IE 8+를 포함한 대부분의 브라우저와 호환되지만 이전에는 호환되지 않는 것으로 보입니다 .

— 수수께끼
소스

나는 테이블의 여러 행 주위에 단일 테두리를 두는 것에 대해 물었고, 본질적으로 시각적으로 여러 섹션으로 나누지 만 동일한 테이블 내에서 다른 섹션의 항목이 정렬되도록했습니다.

— Kyle Cronin

3

알겠습니다. 저도 필요했습니다. 테두리를 원하는 행 세트를 자체 tbody로 묶고 위의 CSS는 그 세트 주위에 테두리를 만듭니다. 즉, 상단 행의 상단 테두리, 하단 행의 하단 테두리 및 왼쪽 tbody의 모든 행에 오른쪽 테두리가 있습니다. 테두리는 실제로 행 "위에"있는 것이 아니라 효과를 설명하려고하는 tbody 자체의 윤곽에 있습니다.

— 수수께끼

오, 알겠습니다. 여러 개의 tbody가 작동하며 고려하지 않은 것입니다. Upvoted :)

— Kyle Cronin

정말 동적 데이터가없는 한 tbody를 정의하는 대신 nth-child () css 속성을 사용하는 것이 좋습니다. nth-child (), nth-last-child () 및 not ()을 사용하여 원하는 행 / 셀을 선택할 수 있습니다 (표에있는 사물의 상대 색인을 알고있는 한). 예를 들어 tr : not (: nth-child (-n + 2)) : not (: nth-last-child (1))

— BT

1

윤곽선은 요소의 특정면에 경계를 둘 가능성 이 없습니다 . 예를 들어 "outline-top"은 없습니다. 이것은 제한된 솔루션입니다

— BT

53

응답 해 주신 모든 분들께 감사드립니다! 여기에 제시된 모든 솔루션을 시도했고 다른 가능한 솔루션을 인터넷에서 더 많이 검색했으며 유망한 솔루션을 찾은 것 같습니다.

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}

<html>

<head>
</head>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr class="top row">
      <td>one</td>
      <td>two</td>
    </tr>
    <tr class="bottom row">
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr class="top bottom row">
      <td colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</body>

</html>

스 니펫 확장

산출:

여기에 이미지 설명 입력

대신에 추가 할 필요없이 top, bottom, left, 및 right모든에 클래스를 <td>, 내가 할 일은 추가입니다 top row상단 <tr>, bottom row하단 <tr>, 그리고 row모든에 <tr>와있다. 이 솔루션에 문제가 있습니까? 알아야 할 크로스 플랫폼 문제가 있습니까?

— 카일 크로닌
소스

브라우저 샷을 통해 테스트를 실행했는데 IE (모든 버전)가 첫 번째 자식 및 마지막 자식 속성을 좋아하지 않는 것처럼 보입니다. :-/

— Kyle Cronin

1

IE 7 및 8은 첫 번째 자식을 지원하지만 마지막 자식 (!)은 지원하지 않는 것처럼 보입니다. msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

— mechanical_meat

이 cellspacing속성은 HTML5에서 더 이상 사용되지 않습니다. CSS table { border-collapse: collapse; border-spacing: 0; }가 이제 갈 길인 것 같습니다 .

— Stefan van den Akker 2014

36

설정하면 border-collapsecollapse부모 테이블 스타일을로tr : (스타일은 데모 용 인라인) 스타일 을 지정할 수 있습니다 .

<table style="border-collapse: collapse;">
  <tr>
    <td>No Border</td>
  </tr>
  <tr style="border:2px solid #f00;">
    <td>Border</td>
  </tr>
  <tr>
    <td>No Border</td>
  </tr>
</table>

산출:

HTML 출력

— 해돋이
소스

8

나는 이것도 가지고 놀았고 이것이 나에게 가장 좋은 선택 인 것 같았다.

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

참고 이 유체 / 자동 열 너비의 사용을 방지 할 세포가 다른 행에있는 사람들과 더 이상 정렬을 것 같은,하지만 테두리 / 색상 포맷은 아직 확인을 작동합니다. 해결책은 TR 및 TD에 지정된 너비를 제공하는 것입니다. (px 또는 %)를 제공하는 것입니다.

물론 tr.myClass특정 행에만 적용하려는 경우 선택기를 만들 수 있습니다. 분명히 display: tableIE 6/7에서는 작동하지 않지만, 작동 할 수있는 다른 해킹 (hasLayout?)이있을 수 있습니다. :-(

— 사이먼 이스트
소스

6

이 솔루션은 올바르지 않습니다. "display : table"은 전체 행을 하나의 테이블 셀에 넣습니다. --- 테이블의 다른 행에 대한 서식이 손실됩니다. Firefox와 Chromium에서 이것을 시도했습니다.

— Yaakov Belch 2013

Yaakov, 당신이 말하는 것은 유동적 인 열 너비가 더 이상 테이블의 다른 행과 정렬되지 않지만 (이 바이올린에서 볼 수 있듯이 jsfiddle.net/MrKtw ) 테두리 / 색상 서식은 여전히 정상적으로 작동 한다는 것 입니다. 해결책은 TR 및 TD에 지정된 너비 (px 또는 %)를 제공하는 것입니다.

— Simon East

사이먼, 무슨 뜻인지 보여 드리기 위해 당신의 바이올린을 갈고리 바 꾸었습니다 이것 좀보세요 : jsfiddle.net/a6DZV --- "display : table"형식을 한 행에만 적용합니다. 보시다시피이 행은 테이블의 한 셀로 효과적으로 변환됩니다. 즉, 다른 테이블의 셀 안에 한 행 테이블을 중첩하고이 내부 테이블의 테두리를 표시하는 것과 동일한 결과를 얻습니다. 솔루션은 DOM에 몇 개의 노드를 저장하지만 호환되지 않습니다.

— Yaakov Belch 2013

3

이를 수행하는 방법이 될 수있는 tbody 요소를 사용하는 접근법이 있습니다. tbody에 테두리를 설정할 수는 없지만 (tr에서 할 수없는 것과 같음) 배경색을 설정할 수 있습니다. 원하는 효과를 테두리 대신 행 그룹의 배경색으로 얻을 수 있다면 작동합니다.

<table cellspacing="0">  
    <tbody>
        <tr>    
            <td>no border</td>    
            <td>no border here either</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
            <td>one</td>    
            <td>two</td>  
        </tr>  
        <tr>    
            <td>three</td>    
            <td>four</td>  
        </tr>  
    <tbody>
        <tr>    
             <td colspan="2">once again no borders</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
             <td colspan="2">hello</td>  
        </tr>
    <tbody>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>

— sipwiz
소스

2

<tbody>태그를 사용하여 행을 그룹화 한 다음 스타일을 적용하십시오.

<table>
  <tr><td>No Style here</td></tr>
  <tbody class="red-outline">
    <tr><td>Style me</td></tr>
    <tr><td>And me</td></tr>
  </tbody>
  <tr><td>No Style here</td></tr>
</table>

그리고 style.css의 CSS

.red-outline {
  outline: 1px solid red;
}

— csi
소스

1

내가 생각할 수있는 유일한 다른 방법은 테두리가 필요한 각 행을 중첩 된 테이블로 묶는 것입니다. 그러면 테두리를 더 쉽게 만들 수 있지만 잠재적으로 다른 레이아웃 문제가 발생할 수 있으므로 테이블 셀의 너비를 수동으로 설정해야합니다.

다른 레이아웃 요구 사항에 따라 귀하의 접근 방식이 가장 좋은 방법 일 수 있으며 여기에 제안 된 접근 방식은 가능한 대안입니다.

<table cellspacing="0">  
    <tr>    
        <td>no border</td>    
        <td>no border here either</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>one</td>    
                        <td>two</td>  
                  </tr>  
                  <tr>    
                      <td>three</td>    
                      <td>four</td>  
                  </tr>  
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">once again no borders</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>hello</td>  
                   </tr>
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>

— sipwiz
소스

답변 해 주셔서 감사합니다. 그래도 레이아웃 문제에 대해서는 맞습니다. 저는 손으로하지 않고 열을 정렬하는 것을 선호합니다. <tr> 태그에 클래스를 적용하는 것은 어떻습니까? 가능합니까?

— Kyle Cronin

"table-layout : fixed"가있는 테이블을 사용하고 각 열의 너비를 명시 적으로 설정하면 (<col>을 사용하거나 첫 번째 행의 셀 너비 만 설정하여) 내용에 관계없이 열이 정렬됩니다. 테이블을 중첩 할 필요조차 없습니다. 세 개의 개별 테이블이 예제를 잘 수행합니다.

— bobince

1

MxN 셀의 임의 블록 주위에 테두리를 두려는 요구 사항에 따라 Javascript를 사용하지 않고는 더 쉬운 방법이 없습니다. 셀이 고정 된 경우 부동을 사용할 수 있지만 다른 이유로 문제가 있습니다. 당신이하는 일은 지루할 수 있지만 괜찮습니다.

좋아, 만약 당신이 jQuery (내가 선호하는 접근 방식)를 사용하는 자바 스크립트 솔루션에 관심이 있다면,이 상당히 무서운 코드 조각을 보게 될 것이다.

<html>
<head>

<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
</script>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>no border</td>
    <td>no border here either</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td colspan="2">once again no borders</td>
  </tr>
</tfoot>
</table>
</html>

더 쉬운 방법에 대한 제안을 기꺼이 받아 들일 것입니다 ...

— 클레 투스
소스

1

td 태그에 클래스를 추가하는 것 같습니까? 정적으로 생성되거나 최악의 경우 직접 생성 된 일부 서버 측 스크립트로는이 작업을 수행 할 수없는 이유는 무엇입니까? 나에게 JavaScript 남용처럼 보입니다.

— Thomas

3

실제로 포스터는 Javascript 솔루션을 요청했습니다. 정보가 충분하지 않기 때문에 Javascript 남용이라고 말할 수 없습니다. 예를 들어 사용자 클릭으로 인해 테두리가 추가되고 있습니까? 그렇다면 서버 솔루션이 잘못된 것입니다.

— cletus

정보가 부족해서 죄송합니다. 이것은 서버 측에서 생성되므로 수동으로 클래스를 추가 할 수 있다는 것은 사실이지만 JS 솔루션이 더 간단한 인터페이스를 제공하는 방식이 마음에 듭니다. 그래서 나는 아마도 JS와 함께 가지 않을 것이지만 그것은 볼 수있는 좋은 해결책입니다.

— Kyle Cronin

0

트릭은 약간의 수정 으로 enigment의 답변 덕분에 outline 속성입니다.

이 수업 사용

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

그런 다음 HTML에서

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

결과는 이것이 도움 이 되기를 바랍니다.

— Basheer AL-MOMANI
소스

-5

더 쉬운 방법은 테이블을 서버 측 컨트롤로 만드는 것입니다. 다음과 비슷한 것을 사용할 수 있습니다.

Dim x As Integer
table1.Border = "1"

'Change the first 10 rows to have a black border
 For x = 1 To 10
     table1.Rows(x).BorderColor = "Black"
 Next

'Change the rest of the rows to white
 For x = 11 To 22
     table1.Rows(x).BorderColor = "White"
 Next

— 커티스
소스

1

영업 이익은 요구한다 쉽게 그것을 할 방법

— orique

2

OP는 HTML / CSS에서 더 쉬운 방법을 요구하고 있습니다. 그의 질문에는 VB 또는 VBA 키워드가 없습니다. 도움말 섹션을 살펴 보시기 바랍니다. stackoverflow.com/help/how-to-answer 행운을 빕니다.

— ForceMagic 2013-07-09