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

100pxในตารางของฉันฉันกำหนดความกว้างของเซลล์แรกในคอลัมน์ที่จะเป็น
แต่เมื่อข้อความในหนึ่งของเซลล์ในคอลัมน์นี้ยาวเกินไป, 100pxความกว้างของคอลัมน์กลายเป็นมากกว่า ฉันจะปิดการใช้งานการขยายตัวนี้ได้อย่างไร

ฉันเล่นกับมันสักพักเพราะฉันมีปัญหาในการหามัน

คุณจำเป็นต้องกำหนดความกว้างเซลล์ (อย่างใดอย่างหนึ่งthหรือtdทำงานผมตั้งทั้งสอง) และการตั้งค่าไปtable-layout fixedด้วยเหตุผลบางอย่างความกว้างของเซลล์ดูเหมือนจะคงที่เฉพาะเมื่อตั้งค่าความกว้างของตารางด้วย (ฉันคิดว่ามันโง่ แต่เป็นคำพูด)

นอกจากนี้ยังเป็นประโยชน์ในการตั้งค่าoverflowคุณสมบัติเป็นhiddenเพื่อป้องกันไม่ให้ข้อความพิเศษใด ๆ ออกมาจากตาราง

คุณควรตรวจสอบให้แน่ใจว่าคุณทิ้งขอบที่กำหนดไว้ทั้งหมดไว้สำหรับ CSS ด้วย

ตกลงนี่คือสิ่งที่ฉันมี:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

ที่นี่มันอยู่ใน JSFiddle

ผู้ชายคนนี้มีปัญหาที่คล้ายกัน: ความกว้างของเซลล์ตาราง - ความกว้างคงที่, การตัด / ตัดคำยาว

ดู: http://www.html5-tutorials.org/tables/changing-column-width/

หลังแท็กตารางให้ใช้องค์ประกอบ col คุณไม่จำเป็นต้องมีแท็กปิด

ตัวอย่างเช่นหากคุณมีสามคอลัมน์:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

เพียงแค่เพิ่ม<div>ในแท็ก<td>หรือกำหนดความกว้างภายใน<th> <div>สิ่งนี้จะช่วยคุณ ไม่มีอะไรทำงาน

เช่น.

<td><div style="width: 50px" >...............</div></td>

หากคุณต้องการคอลัมน์ที่มีความกว้างคงที่มากกว่าหนึ่งคอลัมน์ขณะที่คอลัมน์อื่นควรปรับขนาดให้ลองตั้งค่าทั้งสองmin-widthและmax-widthเป็นค่าเดียวกัน

คุณต้องเขียนสิ่งนี้ภายใน CSS ที่เกี่ยวข้อง

table-layout:fixed;

สิ่งที่ฉันทำคือ:

1. ตั้งค่าความกว้าง td:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. ตั้งค่าความกว้าง td ด้วย CSS:

   <td style="width:200px; height:50px;">

3. ตั้งค่าความกว้างอีกครั้งเป็นสูงสุดและต่ำสุดด้วย CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

มันฟังดูเล็กน้อยซ้ำ ๆ แต่มันให้ผลลัพธ์ที่ต้องการ เพื่อให้บรรลุสิ่งนี้ได้อย่างง่ายดายคุณอาจต้องใส่ค่า CSS ลงในคลาสในสไตล์ชีทของคุณ:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

แล้ว:

<td class="td_size">

วาง class class ให้กับสิ่งที่<td>คุณต้องการ

ฉันใช้สิ่งนี้

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

หากคุณไม่ต้องการโครงร่างที่คงที่ให้ระบุคลาสสำหรับคอลัมน์ให้มีขนาดที่เหมาะสม

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

นอกจากนี้ยังช่วยในการใส่ในช่วง "ฟิลเลอร์มือถือ" โดยมีความกว้าง: อัตโนมัติ สิ่งนี้จะใช้พื้นที่ที่เหลือและจะปล่อยมิติอื่นตามที่ระบุ

ทำให้คำตอบที่ยอมรับตอบกลับสำหรับหน้าจอขนาดเล็กเมื่อเล็กกว่าความกว้างคงที่

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

การตั้งค่านี้:

style="min-width:100px;" 

ทำงานให้ฉัน

KAsun มีความคิดที่ถูกต้อง นี่คือรหัสที่ถูกต้อง ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

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

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

ดูผลลัพธ์

หรือใช้colgroupตามคำแนะนำในคำตอบของ Hyathin

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

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

ฉันไม่จำเป็นต้องตั้งค่าความกว้างบนพาเรนต์ของตารางหรือใช้เลย์เอาต์ของตาราง

ฉันพบว่าคำตอบของ KAsun นั้นทำงานได้ดีขึ้นเมื่อใช้vwแทนpxเช่นนั้น:

<td><div style="width: 10vw" >...............</div></td>

นี่เป็นสไตล์เดียวที่ฉันต้องการเพื่อปรับความกว้างของคอลัมน์

คุณไม่จำเป็นต้องตั้งค่า"fixed"ทั้งหมดที่คุณต้องการคือการตั้งค่าoverflow:hiddenเนื่องจากความกว้างของคอลัมน์ถูกตั้งค่า