테이블 열 너비 설정

테이블 열 너비 설정

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

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

시작 및 날짜가 페이지 너비의 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>

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

<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>

가장 좋은 방법은 당신의 것을 유지하는 것입니다.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. 클래스를 사용하지 않고도.세 가지 다른 방법이 있지만 결과는 동일합니다.

   a)

       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>

   b)

       table { table-layout: fixed; }
       th:nth-of-type(2) { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

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

       table { table-layout: fixed; }
       th:first-child+th { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

더하다colgroup당신의 뒤에table태그. 정의width그리고 여기에 있는 열의 수, 그리고 추가.tbody태그. 당신의 것을.tr안쪽에tbody.

<table>
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 70%;">
    </colgroup>
    
    
    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</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 style="width: 100%">
    <tr>
        <th style="width: 20%">
           column 1
        </th>
        <th style="width: 40%">
           column 2
        </th>
        <th style="width: 40%">
           column 3
        </th>
    </tr>
    <tr>
        <td style="width: 20%">
           value 1
        </td>
        <td style="width: 40%">
           value 2
        </td>
        <td style="width: 40%">
           value 3
        </td>
    </tr>
</table>

    table { table-layout: fixed; }
    .subject { width: 70%; }

    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>

지원하지 않는 이전 브라우저에서도 작동하는 CSS에서 그것을 하는 또 다른 최소한의 방법이 있습니다.:nth-child다음과 같은 선택지가 있습니다. http://jsfiddle.net/3wZWt/ .

HTML:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

CSS:

table {
    border-collapse: collapse;
    width: 100%;
}

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}

<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

데모

테두리 속성을 사용하지 말고 스타일 요구에 맞게 CSS를 사용합니다.

<table style="border:1px; width:100%;">
    <tr>
            <th style="width:15%;">From</th>
            <th style="width:70%;">Subject</th>
            <th style="width:15%;">Date</th>
    </tr>
... rest of the table code...
</table>

그러나 CSS를 그렇게 포함시키는 것은 잘못된 관행입니다 - 대신 CSS 클래스를 사용하고 CSS 규칙을 외부 CSS 파일에 넣어야 합니다.

style="column-width:300px;white-space: normal;"

언급URL : https://stackoverflow.com/questions/928849/setting-table-column-width