ความกว้างของเซลล์ตารางคงที่

ผู้คนจำนวนมากยังคงใช้ตารางเพื่อควบคุมการจัดวางข้อมูลและอื่น ๆ - ตัวอย่างหนึ่งของนี้คือ jqGrid ที่เป็นที่นิยม อย่างไรก็ตามมีเวทมนตร์บางอย่างเกิดขึ้นที่ฉันไม่สามารถเข้าใจได้ (ตารางของมันสำหรับการร้องไห้ออกมาดัง ๆ ว่ามีเวทมนตร์ได้มากแค่ไหน?)

เป็นไปได้อย่างไรที่จะตั้งค่าความกว้างคอลัมน์ของตารางและให้เป็นไปตามที่ jqGrid ทำเช่นนั้น! ถ้าฉันพยายามที่จะทำซ้ำสิ่งนี้แม้ว่าฉันจะตั้งค่าทุก<td style='width: 20px'>ทันทีที่เนื้อหาของหนึ่งในเซลล์เหล่านั้นมีค่ามากกว่า 20px เซลล์จะขยายตัว!

ความคิดหรือข้อมูลเชิงลึกใด ๆ

คุณสามารถลองใช้การ<col>จัดการแท็กจัดแต่งทรงผมของตารางสำหรับทุกแถว แต่คุณจะต้องกำหนดtable-layout:fixedสไตล์ใน<table>หรือคลาส css ตารางและกำหนดoverflowสไตล์สำหรับเซลล์

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

และนี่คือ CSS ของคุณ

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

ตอนนี้ใน HTML5 / CSS3 เรามีทางออกที่ดีกว่าสำหรับปัญหา ในความคิดของฉันแนะนำ CSS โซลูชันนี้อย่างหมดจด:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/

<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

คุณจำเป็นต้องกำหนดตารางเป็นwidthแม้จะอยู่ในวิธีการแก้ปัญหาของ Haunter มิฉะนั้นมันจะไม่ทำงาน
นอกจากนี้มีคุณสมบัติ CSS3 ใหม่ที่vSyncword-break:break-all;ที่แนะนำคือ: นี่จะเป็นการแบ่งคำที่ไม่มีช่องว่างในนั้นออกเป็นหลายบรรทัดเช่นกัน เพียงแก้ไขรหัสเช่นนี้:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

ผลสุดท้าย

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

ฉันมีเซลล์ยาวหนึ่งตาราง td นี่บังคับให้โต๊ะไปที่ขอบของเบราว์เซอร์และดูน่าเกลียด ฉันแค่อยากให้คอลัมน์นั้นมีขนาดคงที่เท่านั้นและทำลายคำเมื่อถึงความกว้างที่ระบุ ดังนั้นสิ่งนี้ทำงานได้ดีสำหรับฉัน:

<td><div style='width: 150px;'>Text to break here</div></td>

คุณไม่จำเป็นต้องระบุรูปแบบใด ๆ กับองค์ประกอบของตาราง คุณอาจใช้โอเวอร์โฟลว์: ซ่อนอยู่; ตามคำแนะนำอื่น ๆ แต่ทำให้ข้อความส่วนเกินหายไป

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

สำหรับตารางความกว้าง FULLSCREEN:

• ความกว้างของตารางต้องเป็น 100%

• ถ้าต้องการ N colunms ดังนั้นต้องเป็น N + 1

ตัวอย่างสำหรับ 3 คอลัมน์:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }

  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: ลูกคนแรก ... : nth-child (1) หรือ ...