รูปแบบง่าย ๆ :

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

<td>ฉันจำเป็นต้องตั้งค่าความกว้างคงที่สำหรับ ฉันได้พยายาม:

tr.something {
  td {
    width: 90px;
  }
}

ด้วย

td.something {
  width: 90px;
}

สำหรับ

<td class="something">B</td>

และแม้กระทั่ง

<td style="width: 90px;">B</td>

แต่ความกว้างของ<td>ยังคงเหมือนเดิม

สำหรับ Bootstrap 4.0:

ใน Bootstrap 4.0.0 คุณไม่สามารถใช้col-*คลาสที่เชื่อถือได้ (ใช้ได้กับ Firefox แต่ไม่สามารถใช้กับ Chrome ได้) คุณต้องใช้คำตอบของ OhadR :

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

สำหรับ Bootstrap 3.0:

ด้วย twitter bootstrap 3 ให้ใช้: class="col-md-*"โดยที่ * คือจำนวนคอลัมน์ของความกว้าง

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

สำหรับ Bootstrap 2.0:

เมื่อใช้ twitter bootstrap 2: class="span*"โดยที่ * คือจำนวนคอลัมน์ความกว้าง

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** หากคุณมี<th>องค์ประกอบกำหนดความกว้างที่นั่นและไม่ได้อยู่ใน<td>องค์ประกอบ

ฉันมีปัญหาเดียวกันฉันทำตารางคงที่แล้วระบุความกว้าง td ของฉัน หากคุณมีที่คุณสามารถทำเช่นนั้น

table {
    table-layout: fixed;
    word-wrap: break-word;
}

แม่แบบ:

<td style="width:10%">content</td>

โปรดใช้ CSS เพื่อจัดโครงสร้างเค้าโครงใด ๆ

แทนที่จะใช้col-md-*คลาสกับแต่ละรายการtdในแถวคุณสามารถสร้างcolgroupและใช้คลาสกับcolแท็ก

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

ตัวอย่างที่นี่

หวังว่าคนนี้จะช่วยใครซักคน:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863

หากคุณใช้<table class="table">บนโต๊ะคลาสตารางของ Bootstrap จะเพิ่มความกว้าง 100% ลงในตาราง คุณต้องเปลี่ยนความกว้างเป็นอัตโนมัติ

นอกจากนี้หากแถวแรกของตารางของคุณเป็นแถวส่วนหัวคุณอาจต้องเพิ่มความกว้างให้กับ th แทนที่จะเป็น td

ในกรณีของฉันฉันก็สามารถที่จะแก้ไขปัญหาโดยใช้min-width: 100pxแทนwidth: 100pxสำหรับเซลล์หรือthtd

.table td, .table th {
    min-width: 100px;
}

สำหรับ Bootstrap 4 คุณสามารถใช้ตัวช่วยคลาสได้:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

ลองนี้ -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

Bootstrap 4.0

ใน Bootstrap 4.0 เราต้องประกาศแถวของตารางเป็น flex-box โดยเพิ่ม class d-flex และปล่อย xs, md, ต่อท้ายเพื่อให้ Bootstrap ทำการสืบทอดมาจาก viewport โดยอัตโนมัติ

ดังนั้นจะมีลักษณะดังต่อไปนี้:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
</table>

หวังว่านี่จะเป็นประโยชน์กับคนอื่นที่นั่น!

ไชโย!

โซลูชันที่รวมกันนี้เหมาะกับฉันฉันต้องการคอลัมน์ความกว้างเท่ากัน

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

ผลลัพธ์ :-

ตกลงฉันเพิ่งทราบว่าปัญหาเกิดขึ้นที่ใด - ใน Bootstrap ถูกตั้งค่าเป็นค่าเริ่มต้นwidthสำหรับselectองค์ประกอบดังนั้นการแก้ปัญหาคือ:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

มีอะไรอีกที่ไม่ได้ผลกับฉัน

ยากที่จะตัดสินโดยไม่มีบริบทของหน้า html หรือ CSS ที่เหลือของคุณ อาจมีเหตุผลเป็นล้าน ๆ เหตุผลที่กฎ CSS ของคุณไม่ส่งผลกระทบต่อองค์ประกอบ td

คุณได้ลองใช้ตัวเลือก CSS ที่เฉพาะเจาะจงมากขึ้นเช่น

tr.somethingontrlevel td.something {
  width: 90px;
}

เพื่อหลีกเลี่ยง CSS ของคุณที่ถูกแทนที่โดยกฎที่เฉพาะเจาะจงมากขึ้นจาก bootstrap css

(โดยวิธีการในตัวอย่าง css แบบอินไลน์ของคุณด้วยแอตทริบิวต์ style คุณสะกดผิดความกว้าง - ซึ่งสามารถอธิบายได้ว่าทำไมความพยายามนั้นล้มเหลว!)

ฉันได้รับการดิ้นรนกับปัญหาในขณะที่ดังนั้นในกรณีที่มีคนทำผิดพลาดโง่เช่นเดียวกับฉัน ... ภายใน<td>ฉันมีองค์ประกอบที่มีwhite-space:preสไตล์ที่ใช้ นั่นทำให้เคล็ดลับตาราง / tr / td ของฉันถูกยกเลิก tdเมื่อฉันออกสไตล์ที่จู่ข้อความทั้งหมดของฉันถูกจัดรูปแบบเป็นอย่างดีภายใน

ดังนั้นตรวจสอบภาชนะหลักเสมอ (เช่นtableหรือtd) แต่ตรวจสอบเสมอว่าคุณไม่ได้ยกเลิกรหัส beautifull ที่ใดที่หนึ่งที่ลึกกว่า :)

ใช้ d-flex แทนแถวสำหรับ "tr" ใน Bootstrap 4

สิ่งนี้คือคลาส "row" จะมีความกว้างมากกว่าคอนเทนเนอร์หลักซึ่งแนะนำปัญหา

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>

ใน bootstarp 4 คุณสามารถใช้rowและcol-*ในตารางฉันใช้มันดังต่อไปนี้

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

นี่คือวิธีที่ฉันมักจะทำเมื่อฉันไม่ต้องจัดการกับ IE

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

ด้วยวิธีนี้คุณสามารถมีตาราง 12-col ที่คุ้นเคย

ไม่มีงานนี้สำหรับฉันและมี cols จำนวนมากใน DataTable เพื่อให้% หรือ sm class เท่ากับ 12 องค์ประกอบเค้าโครงใน bootstrap

ฉันทำงานกับ DataTables Angular 5 และ Bootstrap 4 และมีคอลัมน์จำนวนมากในตาราง ทางออกสำหรับฉันคือการTHเพิ่มDIVองค์ประกอบที่มีความกว้างเฉพาะ ตัวอย่างเช่นสำหรับ cols "ชื่อบุคคล" และ "วันที่จัดกิจกรรม" ฉันต้องการความกว้างเฉพาะจากนั้นใส่divในส่วนหัวคอลัมน์ความกว้าง col ทั้งหมดจากนั้นปรับขนาดตามความกว้างที่ระบุจาก div บนTH:

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...

ใช้. บางสิ่งโดยไม่มีtdหรือth

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>