HTML 및 CSS : 테이블의 일부 행 사이에 선을 두는 방법
타일러
내 테이블의 일부 행 사이에 선을 만들고 싶지만 모두는 아닙니다. 여러 가지 방법을 시도했지만 항상 이상한 일이 발생합니다. 지금까지 내가 가진 것은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<table width=100%>
<tr id="border-top" align="center"><th>A</th><td>B</td></tr>
<tr id="border-top" align="center"><th>1</th><td>11</td></tr>
<tr align="center"><th>2</th><td>12</td></tr>
<tr id="border-top" align="center"><th>3</th><td>13</td></tr>
<tr id="border-top" align="center"><th>4</th><td>14</td></tr>
<tr align="center"><th>5</th><td>15</td></tr>
<tr id="border-top" align="center"><th>6</th><td>16</td></tr>
<tr id="border-top" align="center"><th>7</th><td>17</td></tr>
</table>
</body>
</html>
그리고이 CSS :
#border-top{
text-align:center;
border-top:1px solid black;
display:block;
}
하지만 내 출력은 다음과 같이 보입니다. display:block;
또는 그것없이 이렇게 :
첫 번째 그림과 같이 선이 거기에 있기를 바랍니다. 하지만 두 번째 그림과 같이 모두 제대로 정렬되기를 바랍니다. 대신 어떻게해야합니까?
미리 감사드립니다!
흐릿한
첫째, id속성은 페이지에서 고유해야합니다. 즉, id페이지 당 하나 (동일한 값) 만 있어야 합니다. 사용 class(같은 CSS를 공유하는, 즉 여러 요소를이 특정 유스 케이스 대신 class)
둘째, tr자체는 CSS로 장식되지 않습니다. ths와 s를 장식 해보세요 td.
CSS 규칙에 다음을 추가하면됩니다.
.border-top td, .border-top th{...}
아래 예를 참조하십시오 .
.border-top td, .border-top th {
border-top: 1px solid green;
}
table {
border-spacing: 0px;
}<table width="100%">
<tr class="border-top" align="center">
<th>A</th>
<td>B</td>
</tr>
<tr class="border-top" align="center">
<th>1</th>
<td>11</td>
</tr>
<tr align="center">
<th>2</th>
<td>12</td>
</tr>
<tr class="border-top" align="center">
<th>3</th>
<td>13</td>
</tr>
<tr class="border-top" align="center">
<th>4</th>
<td>14</td>
</tr>
<tr align="center">
<th>5</th>
<td>15</td>
</tr>
<tr class="border-top" align="center">
<th>6</th>
<td>16</td>
</tr>
<tr class="border-top" align="center">
<th>7</th>
<td>17</td>
</tr>
</table>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
한 테이블의 일부 열에서 행을 얻는 방법
- 2
HTML 테이블에서 행 사이의 테두리를 숨기고 CSS를 사용하여 열 사이의 테두리 만 표시하는 방법
- 3
CSS를 사용하여 HTML 테이블 내부의 흰색 선을 제거하는 방법
- 4
HTML의 테이블에서 행의 특정 값을 선택하는 방법
- 5
jquery 및 webservice를 사용하여 SQL에 의해 바인딩되는 html 테이블에서 선택한 행을 얻는 방법은 무엇입니까?
- 6
html 테이블의 두 행 사이에서 줄이나 공백을 나누는 방법
- 7
CSS 및 테이블 속성으로 html 테이블을 만드는 방법
- 8
CSS 및 JQuery를 사용하여 클릭 한 테이블 행의 텍스트 색상을 변경하는 방법
- 9
HTML 테이블의 두 행을 병합하는 방법은 무엇입니까?
- 10
이메일의 HTML 테이블 및 CSS
- 11
두 테이블에서 열로 행을 선택하는 방법
- 12
HTML 테이블 헤더의 MySql 행을 정렬하는 방법
- 13
SQLite의 한 테이블에서 모든 부모 및 자식 행을 얻는 방법은 무엇입니까?
- 14
MySQL에서 테이블의 두 행을 비교하는 방법
- 15
openXML C #을 사용하여 데이터 테이블에 파일 엑셀 행 및 시트를 읽는 방법
- 16
JavaScript 및 jQuery를 사용하여 HTML tbody 테이블의 모든 행에서 첫 번째 열의 값을 덮어 쓰는 방법은 무엇입니까?
- 17
angularJS를 사용하여 HTML에서 행에 4 개의 셀이있는 테이블을 만드는 방법
- 18
SQL : 한 테이블에있는 두 개의 동일한 행을 차단하는 방법이 있습니까?
- 19
SQL : 기본 테이블의 행 값을 기반으로 여러 테이블을 단일 테이블에 조건부로 연결하는 가장 좋은 방법
- 20
일부 행이 서로 누락 된 경우에도 두 테이블을 조인하는 방법
- 21
테이블에서 다른 테이블로 행의 일부 값을 복사하는 방법은 무엇입니까?
- 22
단일 쿼리에서 조인 및 집계 함수를 사용하여 테이블의 여러 행을 업데이트하는 방법
- 23
CSS 선택기가있는 테이블 행의 스포일러
- 24
HTML을 사용하여 테이블의 행 데이터에 href를 추가하는 방법
- 25
오늘 날짜와 7 일 사이에있는 SQLite 테이블에서 행을 선택하는 방법
- 26
css 또는 jquery를 사용하여 두 번째 및 네 번째 테이블 행을 숨기는 방법은 무엇입니까?
- 27
MySQL의 두 테이블간에 일치하지 않는 행을 계산하는 방법은 무엇입니까?
- 28
SQL의 두 테이블에서 일치하지 않는 행을 얻는 방법은 무엇입니까?
- 29
2 개의 테이블에서 일치하는 두 행 선택
몇 마디 만하겠습니다