•  03-07-2019
  •  | 
  •  

문제

a에서 열을 포맷하려고합니다 <table/> 사용 a <col/> 요소. 설정할 수 있습니다 background-color, width, 등을 설정할 수는 없습니다 font-weight. 왜 작동하지 않습니까?

<table>
    <col style="font-weight:bold; background-color:#CCC;">
    <col>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
도움이 되었습니까?

해결책

내가 아는 한, 당신은 css를 사용하여 다음을 형식화 할 수 있습니다. <col> 요소:

  • 배경색
  • 국경
  • 너비
  • 시계

이것 페이지 더 많은 정보가 있습니다.

허브는 옳습니다 - 스타일이 더 좋습니다. <td>직접. 내가하는 일은 다음과 같습니다.

<style type="text/css">
   #mytable tr > td:first-child { color: red;} /* first column */
   #mytable tr > td:first-child + td { color: green;} /* second column */
   #mytable tr > td:first-child + td + td { color: blue;} /* third column */
   </style>
   </head>
   <body> 
   <table id="mytable">
    <tr>
      <td>text 1</td>
      <td>text 2</td>
      <td>text 3</td>
    </tr>
    <tr>
      <td>text 4</td>
      <td>text 5</td>
      <td>text 6</td>
    </tr>
    </table>

그러나 이것은 IE에서는 작동하지 않습니다.

다른 팁

가장 좋은 방법은 스타일링을 직접 적용하는 것입니다. <td> 태그. 나는 그것을 사용한 적이 없다 <col> 태그이지만 대부분의 브라우저는 <table> 그리고 <td>/<th> 레벨이지만 중간 수준은 아닙니다. 예를 들어, 당신이있는 경우

<table>
    <tr class="Highlight">
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

이 CSS는 작동하지 않습니다

tr.Highlight { background:yellow }

그러나 이것은 할 것입니다

tr.Highlight td { background:yellow }

또한 : 위의 코드는 시연 목적으로 만 사용되며 실제로 스타일을 인라인으로 적용하지는 않을 것입니다.

방금 필요했을 수도 있습니다.

tr td:first-child label {
    font-weight: bold;
}

첫 번째 열이 굵은 텍스트가되고 다른 네 열은 일반 텍스트가되도록 테이블을 스타일링하려고 시도하면서 이것을 읽었습니다. 콜 태그를 사용하는 것은 갈 길처럼 보였지만 너비 속성으로 열의 너비를 설정할 수는 있지만 글꼴 중량이 있습니다. Bold는 솔루션 방향을 가리키는 데 도움이되지 않습니다. 모든 TD 요소를 스타일링하여 td {font-weight: bold;} 그런 다음 인접한 형제 자매 선택기를 사용하여 열 2-5를 선택하고 다시 정상으로 스타일링하십시오. td + td {font-weight: normal;}Voila, Alls Good :)

CSS 클래스를 통해 스타일을 적용해 보셨습니까?

다음이 작동하는 것으로 보입니다.

<style type="text/css"> 
  .xx {
  background: yellow;
  color: red;
  font-weight: bold;
  padding: 0 30px;
  text-align: right;
}

<table border="1">
  <col width="150" />
  <col width="50" class="xx" />
  <col width="80" />
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
</tbody>
</table>

col 요소에 대한 참조

ㅏ col 태그는 a 안에 있어야합니다 colgroup 태그, 이것은 문제와 관련이있을 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top