ใช้ CSS td width absolute ตำแหน่ง

โปรดดูJSFIDDLEนี้

td.rhead { width: 300px; }

เหตุใดความกว้าง CSS จึงไม่ทำงาน

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

นอกจากนี้ผลกระทบของตำแหน่ง: fixed, absolute etc มีความกว้าง td อย่างไรถ้ามี? ฉันกำลังมองหาเหตุผลที่มากกว่าการแก้ไข ฉันหวังว่าจะเข้าใจวิธีการทำงาน

นี่อาจไม่ใช่สิ่งที่คุณต้องการฟัง แต่display: table-cellไม่เคารพความกว้างและจะยุบตามความกว้างของตารางทั้งหมด คุณสามารถแก้ไขสิ่งนี้ได้อย่างง่ายดายเพียงแค่มีdisplay: blockองค์ประกอบภายในเซลล์ตารางเองซึ่งมีความกว้างที่คุณระบุเช่น

<td><div style="width: 300px;">wide</div></td>

สิ่งนี้ไม่ควรสร้างความแตกต่างมากนักหาก<table>ตัวมันเองเป็นposition: fixedหรือค่าสัมบูรณ์เนื่องจากตำแหน่งของเซลล์ทั้งหมดคงที่เมื่อเทียบกับตาราง

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

แก้ไข: ฉันไม่สามารถรับเครดิตได้ แต่เนื่องจากความคิดเห็นบอกว่าคุณสามารถใช้min-widthแทนwidthเซลล์ตารางแทนได้

คุณควรใช้ table-layout: fixed

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

คงที่ดีกว่ามากและแสดงผลได้เร็วขึ้นในหน้า โครงสร้างของตารางขึ้นอยู่กับความกว้างโดยรวมของตารางและความกว้างของแต่ละคอลัมน์

ที่นี่ใช้กับตัวอย่างดั้งเดิม: JSFIDDLEคุณจะทราบว่าคอลัมน์ที่เหลือถูกทับและทับซ้อนกันของเนื้อหา เราสามารถแก้ไขได้ด้วย CSS เพิ่มเติม (สิ่งที่ฉันต้องทำคือเพิ่มคลาสให้กับ TR ตัวแรก):

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

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

เห็นในการดำเนินการที่นี่: JSFIDDLE

สาเหตุที่ไม่สามารถใช้งานได้ในลิงก์ที่คุณให้มาเนื่องจากคุณพยายามแสดงคอลัมน์ 300px บวก 52 คอลัมน์ในแต่ละช่วง 7 คอลัมน์ ลดจำนวนคอลัมน์และใช้งานได้ คุณไม่สามารถพอดีกับจำนวนมากบนหน้าจอ

หากคุณต้องการบังคับให้คอลัมน์พอดีลองตั้งค่า:

body {min-width:4150px;}

ดู jsfiddle ของฉัน: http://jsfiddle.net/Mkq8L/6/ @mike ฉันยังไม่สามารถแสดงความคิดเห็นได้

เหตุผลก็คือเพราะคุณไม่ได้ระบุความกว้างของตารางและ td ทั้งหมดของคุณก็ล้น

ตัวอย่างเช่นฉันกำหนดความกว้างของตารางไว้ที่ 5,000px ซึ่งฉันคิดว่าจะตรงกับความต้องการของคุณ

table{
    width:5000px;
}

เป็นรหัสเดียวกับที่คุณระบุซึ่งฉันเพิ่มเข้าไปในความกว้างของตารางเท่านั้น

ฉันเชื่อว่าสิ่งที่เกิดขึ้นเป็นเพราะ TD ของคุณผ่านความกว้างของตารางเริ่มต้น ซึ่งคุณจะเห็นได้ว่าถ้าคุณดึง td ออกมาประมาณ 45 ตัวในแต่ละ tr (เช่นรหัสที่คุณระบุในคำถามไม่ใช่ jsfiddle) มันก็ใช้ได้ดี

ลองใช้งานได้

<table>
<thead>
<tr>
<td width="300">need 300px</td>

ลองนำไปใช้

table {
  table-layout: auto;
}

หากคุณใช้ Bootstrap คลาสtableจะมีtable-layout: fixed;ค่าเริ่มต้น

ใช้คุณสมบัติเค้าโครงตารางและค่า "คงที่" บนโต๊ะของคุณ

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

หลังจากตั้งค่าความกว้างทั้งหมดของตารางตอนนี้คุณสามารถตั้งค่าความกว้างเป็น% ของ td

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

คุณสามารถเรียนรู้เพิ่มเติมได้ที่ลิงค์นี้: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

วิธีแก้ปัญหาบ้าๆของฉัน)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

ถ้าตัวอย่างเช่นความกว้างของตารางคือ 100% ให้ลองใช้ความกว้างเปอร์เซ็นต์ใน td เช่น 20%

ตัดเนื้อหาจากเซลล์แรกใน div เช่น:

HTML:

<td><div class="rhead">a little space</div></td>

CSS:

.rhead {
  width: 300px;
}

นี่คือjsfiddle

คุณยังสามารถใช้:

.rhead {
    width:300px;
}

แต่จะใช้ได้กับบางเบราว์เซอร์เท่านั้นถ้าจำไม่ผิด IE8 ไม่อนุญาตให้ทำเช่นนี้ โดยรวมแล้วการใส่width=""แอตทริบิวต์ใน<td>ตัวมันเองจะปลอดภัยกว่า