การตั้งค่าความกว้างคอลัมน์ตาราง

ฉันมีตารางง่ายๆที่ใช้สำหรับกล่องจดหมายดังนี้:

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

ฉันจะตั้งค่าความกว้างได้อย่างไรจากและวันที่คือ 15% ของความกว้างของหน้าและหัวเรื่องคือ 70% ฉันต้องการให้ตารางใช้ความกว้างของหน้าทั้งหมด

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) เบราว์เซอร์นั้นมีปัญหาในการเรนเดอร์องค์ประกอบที่มีขนาดเป็นเปอร์เซ็นต์ถ้า wrapper ไม่มีขนาดที่แน่นอน

ใช้ CSS ด้านล่างการประกาศครั้งแรกจะทำให้มั่นใจได้ว่าตารางของคุณจะยึดตามความกว้างที่คุณให้ไว้ (คุณจะต้องเพิ่มคลาสใน HTML ของคุณ):

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

ทางเลือกอื่นในการเรียนเพียงครั้งเดียวในขณะที่รักษาสไตล์ของคุณในไฟล์ CSS ซึ่งสามารถใช้งานได้ใน IE7:

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

   เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

   ขยายตัวอย่างข้อมูล

ขึ้นอยู่กับร่างกายของคุณ (หรือกองที่วางตารางของคุณ) การตั้งค่าคุณควรจะทำสิ่งนี้:

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

การสาธิต

ลองใช้วิธีนี้แทน

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

อย่าใช้คุณสมบัติเส้นขอบใช้ 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 ภายนอก

นี่เป็นอีกวิธีหนึ่งที่น้อยที่สุดที่จะทำใน 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%;
}

เพิ่ม colgroup หลังแท็กตารางของคุณ กำหนดความกว้างและจำนวนคอลัมน์ที่นี่ และเพิ่มแท็ก tbody ใส่ TR ของคุณเข้าไปในร่างกาย

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

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