HTML과 CSS를 사용하여 테이블 열 너비를 정의하는 방법은 무엇입니까?

HTML 및 CSS에서 테이블 열 너비 정의

제공된 테이블에서 열 너비를 설정하려면:

CSS 너비 속성:

CSS 내의 너비 속성을 활용하여 각 테이블 열의 너비를 정의합니다. 값을 픽셀(px) 또는 상위 요소 너비의 백분율(%)로 지정할 수 있습니다.

예:

<code class="css">table {
  width: 100%;  /* Table takes up 100% page width */
}

colgroup {
  display: inline-block;
  width: 100%;
}

col {
  /* Set column widths as a percentage of the parent column group */
  width: 15%;
  width: 70%;
  width: 15%;
}

/* Additional styling for visual demonstration */

td {
  background-color: #aaa;
}

td:nth-child(1), td:nth-child(3) {
  background-color: #777;
}</code>

HTML 마크업 :

<code class="html">&lt;table style=&quot;width: 100%;&quot;&gt;
  &lt;colgroup&gt;
    &lt;col span=&quot;1&quot; style=&quot;width: 15%;&quot;&gt;
    &lt;col span=&quot;1&quot; style=&quot;width: 70%;&quot;&gt;
    &lt;col span=&quot;1&quot; style=&quot;width: 15%;&quot;&gt;
  &lt;/colgroup&gt;
  &lt;!-- Insert table headers, body, and rows here --&gt;
&lt;/table&gt;</code>

이 솔루션은 "보낸 사람", "제목" 및 "날짜" 열에 각각 15%, 70%, 15%의 너비를 할당합니다. 또한 표가 전체 페이지 너비에 걸쳐 확장되도록 보장합니다.

위 내용은 HTML과 CSS를 사용하여 테이블 열 너비를 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!