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

StackOverflow https://stackoverflow.com/questions/670424

  •  21-08-2019
  •  | 
  •  

문제

테이블의 특정 행 주위에 테두리를 넣을 수 있는 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>

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

메모: 여러 개의 경계가 있는 섹션이 필요합니다.기본 아이디어는 각각 여러 행을 포함하는 여러 개의 경계가 있는 클러스터를 갖는 것입니다.

도움이 되었습니까?

해결책

어때 tr {outline: thin solid black;}? TR 또는 TBody 요소에서 나를 위해 일하고 나타납니다 IE 8+를 포함하여 대부분의 브라우저와 호환됩니다.

다른 팁

응답 한 모든 분들께 감사드립니다! 나는 여기에 제시된 모든 솔루션을 시도했으며 다른 가능한 솔루션을 위해 인터넷에서 더 많은 검색을 수행했으며, 유망한 것을 발견했다고 생각합니다.

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>

산출:

enter image description here

추가하는 대신 top, bottom, left, 그리고 right 모든 수업 <td>, 내가해야 할 일은 추가뿐입니다 top row 상단에 <tr>, bottom row 맨 아래로 <tr>, 그리고 row 모든 것에 <tr> 사이. 이 솔루션에 문제가 있습니까? 내가 알아야 할 크로스 플랫폼 문제가 있습니까?

당신이 설정하면 border-collapse 스타일 collapse 부모 테이블에서 당신은 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 output

나도 이 일을 하면서 놀고 있었는데 이것이 나에게 가장 좋은 선택인 것 같았습니다.

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

참고하세요 이렇게 하면 유동/자동 열 너비를 사용할 수 없습니다., 셀은 더 이상 다른 행의 셀과 정렬되지 않지만 테두리/색상 서식은 여전히 ​​잘 작동합니다.해결책은 TR 및 TD에 지정된 너비를 제공합니다. (px 또는 %).

물론 선택기를 만들 수도 있습니다. tr.myClass 특정 행에만 적용하고 싶다면.보기에 display: table 그러나 IE 6/7에서는 작동하지 않지만 이러한 경우에 작동할 수 있는 다른 해킹(hasLayout?)이 있을 수 있습니다.:-(

다음은 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>

그룹을 함께 사용하여 <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;
}

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

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

<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>

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

자, jQuery (내가 선호하는 접근법)를 사용하여 JavaScript 솔루션에 관심이 있다면이 상당히 무서운 코드가됩니다.

<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>

더 쉬운 방법에 대해 행복하게 제안 할 것입니다 ...

트릭은 다음과 같습니다 개요 속성 감사합니다 선정의 답변 거의 수정이 거의 없습니다

이 수업을 사용하십시오 

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

그런 다음 HTML에서

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

그리고 결과는입니다enter image description here이것이 당신에게 도움이되기를 바랍니다

더 쉬운 방법은 테이블을 서버 측 제어로 만드는 것입니다. 이와 유사한 것을 사용할 수 있습니다.

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
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top