ฉันจะตั้งค่าความกว้างสูงสุดของเซลล์ตารางโดยใช้เปอร์เซ็นต์ได้อย่างไร

Question 1

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

ข้างต้นไม่ทำงาน ฉันจะตั้งค่าความกว้างสูงสุดของเซลล์ตารางโดยใช้เปอร์เซ็นต์ได้อย่างไร

Question 2

ตามคำจำกัดความของความกว้างสูงสุดในข้อมูลจำเพาะ CSS 2.1 "ผลของ" ความกว้างต่ำสุด "และ" ความกว้างสูงสุด "บนตารางตารางแบบอินไลน์เซลล์ตารางคอลัมน์ตารางและกลุ่มคอลัมน์ไม่ได้กำหนดไว้" ดังนั้นคุณจึงไม่สามารถตั้งค่าความกว้างสูงสุดบนองค์ประกอบ td ได้โดยตรง

หากคุณต้องการให้คอลัมน์ที่สองกินพื้นที่มากที่สุด 67% คุณสามารถตั้งค่าความกว้าง (ซึ่งมีผลต่อความกว้างขั้นต่ำสำหรับเซลล์ตาราง) เป็น 33% เช่นในกรณีตัวอย่าง

td:first-child { width: 33% ;}

การตั้งค่าสำหรับทั้งสองคอลัมน์จะไม่ทำงานได้ดีเนื่องจากมีแนวโน้มที่จะทำให้เบราว์เซอร์ให้ความกว้างของคอลัมน์เท่ากัน

Question 3

คำถามเก่าที่ฉันรู้ แต่ตอนนี้ทำได้โดยใช้คุณสมบัติ css table-layout: fixedบนแท็กตาราง คำตอบด้านล่างจากคำถามนี้ความกว้างเปอร์เซ็นต์ CSS และข้อความล้นในเซลล์ตาราง

ทำได้ง่าย ๆ โดยใช้table-layout: fixedแต่ยุ่งยากเล็กน้อยเพราะไม่ค่อยมีใครรู้เกี่ยวกับคุณสมบัติ CSS นี้

table {
  width: 100%;
  table-layout: fixed;
}

ดูการใช้งานจริงได้ที่ซออัพเดตที่นี่: http://jsfiddle.net/Fm5bM/4/

Question 4

ฉันรู้ว่านี่เป็นเวลาหนึ่งปีต่อมา แต่ฉันคิดว่าจะแบ่งปัน ฉันพยายามทำสิ่งเดียวกันและเจอวิธีแก้ปัญหานี้ที่เหมาะกับฉัน เราตั้งค่าความกว้างสูงสุดสำหรับทั้งตารางจากนั้นทำงานกับขนาดเซลล์เพื่อให้ได้เอฟเฟกต์ที่ต้องการ

ใส่ตารางใน div ของตัวเองจากนั้นตั้งค่าความกว้างความกว้างต่ำสุดและ / หรือความกว้างสูงสุดของ div ตามที่ต้องการสำหรับทั้งตาราง จากนั้นคุณสามารถทำงานและตั้งค่าความกว้างและความกว้างต่ำสุดสำหรับเซลล์อื่น ๆ และความกว้างสูงสุดสำหรับ div ที่ทำงานอย่างมีประสิทธิภาพทั้งรอบและหลังเพื่อให้ได้ความกว้างสูงสุดที่เราต้องการ

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

จากนั้นในสไตล์ของคุณใส่:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

เป็นที่ยอมรับสิ่งนี้ไม่ได้ให้ความกว้าง "สูงสุด" ของเซลล์ต่อเซลล์ แต่อนุญาตให้มีการควบคุมบางอย่างที่อาจทำงานแทนตัวเลือกดังกล่าวได้ ไม่แน่ใจว่าจะเหมาะกับความต้องการของคุณหรือไม่ ฉันรู้ว่ามันใช้ได้กับสถานการณ์ของเราที่เราต้องการให้ด้านการนำทางในหน้าปรับขนาดขึ้นและลงเป็นจุด ๆ หนึ่ง แต่สำหรับหน้าจอกว้างทั้งหมดในทุกวันนี้

Question 5

เปอร์เซ็นต์ควรสัมพันธ์กับขนาดที่แน่นอนลองทำดังนี้:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>