테이블 열 너비 설정 <th>Subject</th>

받은 편지함에 사용되는 간단한 테이블이 다음과 같습니다.

<table border="1">
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>

시작 및 날짜가 페이지 너비의 15 %이고 주제가 70 %가되도록 너비를 설정하는 방법 또한 테이블이 전체 페이지 너비를 차지하기를 원합니다.

답변

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>



    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

스 니펫 확장

답변

HTML :

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

CSS :

table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}

가장 좋은 방법은 코드 중복을 줄이고 관심을 분리하기 위해 HTML과 CSS를 분리하여 유지하는 것입니다 (구조 및 의미론을위한 HTML, 프리젠 테이션을위한 CSS).

이전 버전의 Internet Explorer에서 작동하려면 표에 특정 너비 (예 : 900px)를 제공해야 할 수도 있습니다. 해당 랩퍼의 크기가 정확한 경우 해당 브라우저에는 백분율 크기의 요소를 렌더링하는 데 문제가 있습니다.

답변

아래 CSS를 사용하면 첫 번째 선언으로 테이블이 제공 한 너비에 고정됩니다 (HTML에 클래스를 추가해야 함).

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

답변

IE7에서도 작동하는 CSS 파일에 스타일을 유지하면서 하나의 클래스 만 사용하는 대체 방법 :

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

최근에는 nth-child()CSS3 (IE9 +) 의 셀렉터를 사용 하여 nr을 넣을 수도 있습니다. 인접한 셀렉터와 함께 문자열을 묶는 대신 괄호 안에 각 열을 추가합니다. 예를 들면 다음과 같습니다.

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

답변

이것들은 나의 두 가지 제안입니다.

  1. 수업 이용하기. 다른 두 열의 너비는 브라우저에서 자동으로 각각 15 %로 설정되므로 너비를 지정할 필요가 없습니다.

        table { table-layout: fixed; }
    .subject { width: 70%; }
        <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>

    스 니펫 확장

  2. 수업을 사용하지 않고. 세 가지 방법이 있지만 결과는 동일합니다.

    ㅏ)

        table { table-layout: fixed; }
    th+th { width: 70%; }
    th+th+th { width: 15%; }
        <table>
      <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
      </tr>
    </table>

    스 니펫 확장

    비)

        table { table-layout: fixed; }
    th:nth-of-type(2) { width: 70%; }
        <table>
      <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
      </tr>
    </table>

    스 니펫 확장

    c) 이것은 내가 가장 좋아하는 것입니다. b)와 동일하지만 더 나은 브라우저 지원.

        table { table-layout: fixed; }
    th:first-child+th { width: 70%; }
        <table>
      <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
      </tr>
    </table>

    스 니펫 확장

답변

몸 (또는 테이블을 감싸고있는 div) ‘설정’에 따라 다음을 수행 할 수 있어야합니다.

body {
  width: 98%;
}

table {
  width: 100%;
}


th {
  border: 1px solid black;
}


th.From, th.Date {
  width: 15%;
}

th.Date {
  width: 70%;
}


<table>
  <thead>
    <tr>
      <th class="From">From</th>
      <th class="Subject">Subject</th>
      <th class="Date">Date</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Me</td>
       <td>Your question</td>
       <td>5/30/2009 2:41:40 AM UTC</td>
     </tr>
   </tbody>
</table>

데모

답변

    table { table-layout: fixed; }
    .subject { width: 70%; }
    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>

스 니펫 확장