CSS를 사용하여 테이블의 헤드라인 행을 수정하는 방법은 무엇입니까?[닫은]
문제
열에는 테두리가 없는 표를 만들고, 행에만 테두리를 1px 주었습니다.
나는 '테두리 축소' 속성을 사용한 다음 모든 행에 1px의 테두리를 지정했습니다.
그러나 내 문제는 헤드라인 행이 표의 나머지 부분보다 약간 더 길다는 것입니다.
어떻게 고칠 수 있는지 아는 사람 있나요?
미리 감사드립니다.
HTML 코드:
<!DOCTYPE html>
<html>
<title>web programming project 2</title>
<link rel="stylesheet" type="text/css" href="exe2CSS1.css">
<body>
<table class=outlined>
<tr id=headline>
<th class=side>Item</th>
<th class=side>Manufacturer</th>
<th class=side>Size</th>
<th class=center>Unit Price</th>
<th class=center>Quantity</th>
<th class=center>Total Price</th>
</tr>
<tr class=firstCol>
<td class=side>Corn Flakes</td>
<td class=side>Kellogg's</td>
<td class=side>18 0z</td>
<td class=center>2.5</td>
<td class=center>1</td>
<td class=center>2.5</td>
</tr>
<tr class=secondCol>
<td class=side>Solid White Tuna</td>
<td class=side>Starkist</td>
<td class=side>5 oz</td>
<td class=center>2.79</td>
<td class=center>2</td>
<td class=center>5.58</td>
</tr>
</table>
</body>
</html>
CSS 코드:
.outlined
{
font:13px Tahoma;
width: 75%;
border-collapse: collapse;
}
tr {
border: 1px solid white;
}
.secondCol{
background-color: #eeeff2
}
.firstCol{
background-color: #dfe1e7
}
.center{
text-align: center;
}
.side{
text-align: left
}
#headline{
background-color: #687291;
color: white;
}
해결책
속성 값 주위에 따옴표가 누락되어 닫는 부분이 누락되었습니다. </th>
"총 가격"의 첫 번째 행에( <th>
대신에)
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>
다른 팁
안녕하세요. 마지막 태그가 제대로 닫히지 않았습니다."<th class=center>Total Price<th>
"
제휴하지 않습니다 StackOverflow