ความกว้าง td ไม่ทำงาน?

ดังนั้นฉันจึงมีรหัสนี้ที่นี่:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

ด้วย CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

มันใช้งานได้ดีบนเบราว์เซอร์ของฉันและฉันได้ทดสอบในทุกเบราว์เซอร์ทั้ง Mac และ PC แต่มีคนบ่นว่าtdด้วยwidthความกว้าง 200 จะเปลี่ยนไปเรื่อย ๆ ฉันไม่รู้ว่าเขากำลังพูดถึงอะไร ไม่มีใครรู้ว่าทำไมเขาถึงเห็นความกว้างเปลี่ยนไปtd?

มันควรจะเป็น:

<td width="200">

หรือ

<td style="width: 200px">

โปรดทราบว่าหากเซลล์ของคุณมีเนื้อหาบางส่วนที่ไม่พอดีกับ 200px (เช่นsomelongwordwithoutanyspaces) เซลล์จะยืดออกtable-layout: fixedไปเรื่อย ๆเว้นแต่ CSS ของคุณจะมีสำหรับตาราง

แก้ไข

ดังที่คริสติน่าเด็ก ๆ สังเกตคำตอบของเธอคุณควรหลีกเลี่ยงทั้งwidthแอตทริบิวต์และการใช้ CSS แบบอินไลน์ (พร้อมstyleแอตทริบิวต์) เป็นแนวทางปฏิบัติที่ดีในการแยกสไตล์และโครงสร้างให้ได้มากที่สุด

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

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

 <table style="table-layout:fixed;">

<td>นี้จะบังคับความกว้างสไตล์ หากใส่ข้อความมากเกินไปข้อความนั้นจะซ้อนทับกับ<td>ข้อความอื่น ดังนั้นลองใช้แบบสอบถามสื่อ

คุณไม่สามารถระบุหน่วยในwidth/ heightแอตทริบิวต์ของตาราง สิ่งเหล่านี้มีหน่วยเป็นพิกเซลเสมอ แต่คุณไม่ควรใช้เลยเนื่องจากเลิกใช้แล้ว

คุณสามารถลองใช้ "table-layout: fixed;" ไปที่โต๊ะของคุณ

table-layout: fixed;
width: 150px;

150px หรือความกว้างที่คุณต้องการ

อ้างอิง: https://css-tricks.com/fixing-tables-long-strings/

คุณสามารถใช้ภายใน<td>tag css:display:inline-block

ชอบ: <td style="display:inline-block">

ลองใช้

word-wrap: break-word;

หวังว่าจะช่วยได้

ลองสิ่งนี้:

word-break: break-all;

ฉันใช้

<td nowrap="nowrap">

เพื่อป้องกันการห่ออ้างอิง: https://www.w3schools.com/tags/att_td_nowrap.asp

โปรดทราบว่าการปรับความกว้างของคอลัมน์ใน thead จะส่งผลต่อทั้งตาราง

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>joe@email.com</td>
    </tr>
</table>

ในกรณีของฉันความกว้างบน thead> tr ถูกแทนที่ความกว้างบนตาราง> tr> td โดยตรง

ใช้

<table style="table-layout:fixed;">

จะบังคับให้ตารางกำหนดความกว้าง 100% จากนั้นใช้รหัสนี้

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(รหัสตารางคือ dataTable และมี 3 คอลัมน์) เพื่อระบุความยาวให้กับแต่ละเซลล์

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

นี่คือข้อกำหนด HTML ของฉัน

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

CSS ของฉัน

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

ปัญหานี้แก้ไขได้ค่อนข้างง่ายโดยใช้min-widthและmax-widthอยู่ในกฎ css

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

ซึ่งจะบังคับให้คอลัมน์แรกมีความกว้าง 80px โดยปกติฉันจะใช้เฉพาะความกว้างสูงสุดโดยไม่มีความกว้างต่ำสุดเพื่อสร้างข้อความที่ยาวเกินไปในบางครั้งจากการสร้างตารางที่มีคอลัมน์ที่มีความกว้างมากซึ่งส่วนใหญ่ว่างเปล่า คำถามของ OP เกี่ยวกับการตั้งค่าเป็นความกว้างคงที่ด้วยเหตุนี้ทั้งสองกฎจึงเข้าด้วยกัน ในหลาย ๆ เบราว์เซอร์width:80px;ใน CSS จะถูกละเว้นสำหรับคอลัมน์ของตาราง การตั้งค่าความกว้างภายใน HTML ใช้งานได้ แต่ไม่ใช่วิธีที่คุณควรทำ

ฉันขอแนะนำให้ใช้กฎความกว้างต่ำสุดและสูงสุดและอย่าตั้งค่าให้เหมือนกัน แต่ควรกำหนดช่วง วิธีนี้ทำให้ตารางสามารถทำได้ แต่คุณสามารถให้คำแนะนำเกี่ยวกับสิ่งที่ต้องทำกับเนื้อหาที่ยาวเกินไป

หากฉันต้องการป้องกันไม่ให้ข้อความถูกตัดและเพิ่มความสูงของแถว แต่ยังคงทำให้ผู้ใช้เห็นข้อความแบบเต็มได้ฉันใช้white-space: nowrap;กฎหลักจากนั้นใช้กฎโฮเวอร์ที่ลบกฎความกว้างและตอนนี้ เพื่อให้ผู้ใช้สามารถดูเนื้อหาทั้งหมดได้เมื่อวางเมาส์เหนือเนื้อหานั้น สิ่งนี้:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

มันขึ้นอยู่กับสิ่งที่คุณพยายามจะบรรลุ ฉันหวังว่านี่จะช่วยใครบางคนได้ PS นอกจากนี้สำหรับ iOS ยังมีการแก้ไขสำหรับการวางเมาส์ไม่ทำงานโปรดดูCSS Hover Not Working บน iOS Safari และ Chrome